/**
 * @Description: 数据探索
 * @Date: 2020-03-23 15:23:17
 */

/* jshint esversion: 6 */
$(function() {
    var pictureChart;

    function updateTableDataList() {
        if (!vm.InitialDataList[vm.dataBaseSelected]) {
            vm.getInitialDataList(vm.dataBaseSelected);
        }

        if (vm.tableTypeSelected == '0') {
            vm.tableDataList = vm.InitialDataList[vm.dataBaseSelected].dbTable;
        } else {
            vm.tableDataList = vm.InitialDataList[vm.dataBaseSelected].historyTable;
        }
        var html = `<option value="">直接选择或搜索选择</option>`;
        vm.tableDataList.map(function(item, index) {
            html += `<option value="` + item.TABLE_NAME + `">` + item.TABLE_ALIAS + `</option>`;
        });
        $('#tableDataList').html(html);
        layui.use('form', function() {
            var form = layui.form;
            form.render('select');
        });
        vm.tableDataSelected = '';
    }

    function showDataErr(msg) {
        msg = msg || '该数据无法使用图形展示, 只可在表格查看';
        vm.toast(msg);
    }

    // 渲染表单
    layui.use('form', function() {
        var form = layui.form;
        form.on('select(dataBaseList)', function(data) {
            // console.log(data.value);
            vm.dataBaseSelected = data.value;
            if (vm.InitialDataList[vm.dataBaseSelected]) {
                updateTableDataList();
            } else {
                vm.getInitialDataList(vm.dataBaseSelected);
            }
        });
        form.on('select(tableTypeList)', function(data) {
            // console.log(data.value);
            vm.tableTypeSelected = data.value;
            updateTableDataList();
        });
        form.on('select(tableDataList)', function(data) {
            // console.log(data.value);
            vm.tableDataSelected = data.value;
        });
        // form.on('select(themeSelect)', function(data) {
        //     // console.log(data.value);
        //     vm.tableDataSelected = data.value;
        // });
    });

    // 出入允许拖拽节点的父容器，一般是ul外层的容器
    var drag1, drag2;

    var vm = new Vue({
        el: '#main',
        data: {
            stopPropagation: false,
            // clicked: 0,
            maxChart: 10,
            dic: '',
            pageTitle: '通用统计报表服务',
            title: '',
            chartBtn: [{
                id: 1,
                title: '柱状图',
                src: '/img/onemap/SmartStatistics/柱状图.jpg',
                canUse: false,
            }, {
                id: 2,
                title: '饼状图',
                src: '/img/onemap/SmartStatistics/饼状图.jpg',
                canUse: false,
            }, {
                id: 3,
                title: '折线图',
                src: '/img/onemap/SmartStatistics/折线.jpg',
                canUse: false,
            }, {
                id: 4,
                title: '矩形树图',
                src: '/img/onemap/SmartStatistics/树图.jpg',
                canUse: false,
            }, {
                id: 5,
                title: '折线图2',
                src: '/img/onemap/SmartStatistics/折线3.jpg',
                canUse: false,
            }, {
                id: 6,
                title: '雷达图',
                src: '/img/onemap/SmartStatistics/雷达图.jpg',
                canUse: false,
            }, {
                id: 7,
                title: '饼状图2',
                src: '/img/onemap/SmartStatistics/饼状图2.jpg',
                canUse: false,
            }, {
                id: 8,
                title: '极坐标图',
                src: '/img/onemap/SmartStatistics/饼状图1.jpg',
                canUse: false,
            }, {
                id: 9,
                title: '漏斗图',
                src: '/img/onemap/SmartStatistics/漏斗图.jpg',
                canUse: false,
            }, {
                id: 10,
                title: '桑基图',
                src: '/img/onemap/SmartStatistics/桑基图.jpg',
                canUse: false,
            }, {
                id: 11,
                title: '散点图',
                src: '/img/onemap/SmartStatistics/散点图.jpg',
                canUse: false,
            }, {
                id: 12,
                title: '弦图',
                src: '/img/onemap/SmartStatistics/弦图.jpg',
                canUse: false,
            }, {
                id: 13,
                title: '复合图(图标)',
                src: '/img/onemap/SmartStatistics/弦图.jpg',
                canUse: false,
            }, ],
            ChartButtonsState: [],

            InitialDataList: {},
            dataBaseList: [],
            tableTypeList: [{
                name: '数据库表',
                value: '0'
            }, {
                name: '历史数据关联表',
                value: '1'
            }],
            tableDataList: [],

            aggregateList: [{
                name: 'AVG',
                value: 'AVG'
            }, {
                name: 'COUNT',
                value: 'COUNT'
            }, {
                name: 'MAX',
                value: 'MAX'
            }, {
                name: 'MIN',
                value: 'MIN'
            }, {
                name: 'SUM',
                value: 'sum'
            }, {
                name: 'COUNT_BIG',
                value: 'COUNT_BIG'
            }, {
                name: 'GROUPING',
                value: 'GROUPING'
            }, {
                name: 'BINARY_CHECKSUM',
                value: 'BINARY_CHECKSUM'
            }, {
                name: 'CHECKSUM_AGG',
                value: 'CHECKSUM_AGG'
            }, {
                name: 'CHECKSUM',
                value: 'CHECKSUM'
            }, {
                name: 'STDEV',
                value: 'STDEV'
            }, {
                name: 'STDEVP',
                value: 'STDEVP'
            }, {
                name: 'VAR',
                value: 'VAR'
            }, {
                name: 'VARP',
                value: 'VARP'
            }],

            // 第一个框选中值
            dataBaseSelected: '',
            // 第二个框选中值(默认是0)
            tableTypeSelected: '0',
            // 第三个框选中值
            tableDataSelected: '',

            // 维度
            dimensionList: [],
            // 度量
            measureList: [],

            dimensionSelected: [],
            measureSelected: [],

            chartType: '',
            filterdata: '',
            aggregate: 'sum',

            nowData: [],
            nowDataNew: [],
            totalData: [],

            startTime: new Date(),
            selectChanged: false,

            themeSelect: [{
                    name: '默认',
                    value: 'default'
                }, {
                    name: '复古',
                    value: 'vintage'
                }, {
                    name: '黑夜',
                    value: 'dark'
                },
                {
                    name: '马卡龙',
                    value: 'macarons'
                },
                {
                    name: '信息化',
                    value: 'infographic'
                },
                {
                    name: '明亮',
                    value: 'shine'
                },
                {
                    name: '罗马',
                    value: 'roma'
                },
            ],

            theme: 'default',
            // theme: 'vintage',
            // theme: 'dark',
            // theme: 'macarons',
            // theme: 'infographic',
            // theme: 'shine',
            // theme: 'roma',
        },

        created() {
            // 啥也不干
            // this.dataBaseSelected = this.dataBaseList[1].NAME || '';
        },

        mounted() {
            this.init();
        },

        methods: {
            init() {
                var _this = this;
                _this.GetDataBaseList();

                // 切换图/表tab
                $('.nav-tabs li').on('click', function() {
                    $('.nav-tabs li').removeClass('active');
                    $(this).addClass('active');
                    $('.contentRightContentTab').hide();
                    $('.' + this.id).show();
                    if (this.id == 'chartTab') {
                        // 重画图
                        resizeChart();
                    }
                    if (this.id == 'tableTab') {
                        if ($('.chartTab .active').length) {
                            var obj = _this.totalData[$('.chartTab .active').index()];
                            vm.nowData = obj.nowData;
                            // 重画表
                            _this.drawTables();
                        } else {
                            vm.toast('请先选择一个图表');
                            $('#myTable').html('');
                            // $('#chartTab').click();
                        }

                    }
                });

                // 点击隐藏展开左侧(re)
                $('#hideBtn').on('click', function() {
                    if ($(this).hasClass('fullScreen')) {
                        $(this).removeClass('fullScreen');
                        $('#contentLeft').animate({
                            left: 0,
                            width: '450px',
                            display: 'inline-block'
                        });
                        $('#contentRight').animate({
                            left: '450px',
                            'padding-left': '20px'
                        });
                        $('#hideBtn').animate({
                            left: '450px',
                        });
                        $(window).trigger("resize");
                    } else {
                        $(this).addClass('fullScreen');
                        $('#contentLeft').animate({
                            left: '-450px',
                            width: 0,
                            display: 'none'
                        });
                        $('#contentRight').animate({
                            left: 0,
                            'padding-left': '10px'
                        });
                        $('#hideBtn').animate({
                            left: '-10px',
                        });
                        $(window).trigger("resize");
                    }
                });

                // 点击图(re)
                $('.chartTab').on('click', '.echartContainer', function(e) {
                    if (!_this.stopPropagation) {
                        var $this = $(e.currentTarget);
                        if ($this.hasClass('active')) {
                            var obj = _this.totalData[$('.chartTab .active').index()];
                            if (_this.nowData.length == 0) {
                                _this.nowData = obj.nowData;
                            }
                            $this.removeClass('active');
                        } else {
                            $('.chartTab .active').removeClass('active');
                            $this.addClass('active');
                            // var {
                            //     dataBaseSelected,
                            //     tableTypeSelected,
                            //     tableDataSelected,
                            //     dimensionSelected,
                            //     measureSelected,
                            //     filterdata,
                            //     aggregate
                            // } = this;

                            var obj = _this.totalData[$('.chartTab .active').index()];

                            _this.dataBaseSelected = obj.dataBaseSelected;
                            _this.tableTypeSelected = obj.tableTypeSelected;
                            _this.tableDataSelected = obj.tableDataSelected;

                            $('#dataBaseList').val(obj.dataBaseSelected);
                            $('#tableTypeList').val(obj.tableTypeSelected);
                            $('#tableDataList').val(obj.tableDataSelected);
                            layui.use('form', function() {
                                var form = layui.form;
                                form.render('select');
                            });

                            _this.dimensionSelected = obj.dimensionSelected;
                            _this.measureSelected = obj.measureSelected;

                            _this.filterdata = obj.filterdata;
                            _this.aggregate = obj.aggregate;

                            var obj = _this.totalData[$('.chartTab .active').index()];
                            _this.getMeasureAndDimension(obj, function() {
                                $('.dimensionListSelected, .measureListSelected').html('');
                                obj.dimensionSelected.map(function(item, index) {
                                    $('.dimensionListSelected').append('<li title="' + item.FIELDNAME + '" style="">' + item.COLUMN_NAME + '</li>');
                                    $('.dimensionList li[title="' + item.FIELDNAME + '"]').remove();
                                });
                                obj.measureSelected.map(function(item, index) {
                                    $('.measureListSelected').append('<li title="' + item.FIELDNAME + '" style="">' + item.COLUMN_NAME + '</li>');
                                    $('.measureList  li[title="' + item.FIELDNAME + '"]').remove();
                                });
                            });

                            setTimeout(function() {
                                if (_this.nowData.length == 0) {
                                    _this.nowData = obj.nowData;
                                }
                            }, 200);
                        }
                    }
                    _this.stopPropagation = false;
                });

                // 展现在地图上
                $('.chartTab').on('click', '.toMapBtn', function(e) {
                    e.stopPropagation();
                    // 新绘
                    var obj = _this.totalData[$('.chartTab .active').index()];
                    var div = window.parent.$('#fmap')[0].contentWindow.other_showEchart({
                        head: '',
                        id: obj.pictureChart.id
                    }, function(res) {
                        vm.toast(res.msg);
                        if (res == 'close') {

                        } else if (res == 'resizestop') {
                            if (pictureChart) {
                                pictureChart.resize();
                            }
                        }
                    });

                    var id = 'id_' + Number(Math.random().toString().substr(3, 6) + Date.now()).toString(36);
                    $(div).attr('id', id);
                    // var pictureChart = echarts.init(div);

                    var pictureChart = echarts.init(div, _this.theme);
                    var hasCustomName = _this.totalData[$('.chartTab .active').index()].pictureChart.hasCustomName;
                    var title = '';

                    if (hasCustomName) {
                        title = _this.totalData[$('.chartTab .active').index()].pictureChart.title;
                    } else {
                        title = '按';
                        _this.totalData[$('.chartTab .active').index()].dimensionSelected.map(function(item, index, arr) {
                            title += item.COLUMN_NAME;
                            if (arr.length != index + 1) {
                                title += '、';
                            }
                        });
                        title += '的';
                        _this.totalData[$('.chartTab .active').index()].measureSelected.map(function(item, index, arr) {
                            title += item.COLUMN_NAME;
                            if (arr.length != index + 1) {
                                title += '、';
                            }
                        });
                        title += '统计';
                    }
                    pictureChart.title = title;

                    _this.drawChartsNext(pictureChart, _this.chartType, obj);
                });

                // 修改标题
                $('.chartTab').on('click', '.changeTitle', function(e) {
                    e.stopPropagation();

                    var hasCustomName = _this.totalData[$('.chartTab .active').index()].pictureChart.hasCustomName;
                    var title = '';
                    if (hasCustomName) {
                        title = _this.totalData[$('.chartTab .active').index()].pictureChart.title;
                    }
                    var html = '<span>' + '名称' + '：</span><input id="myTitle" type="text" class="layui-layer-input" maxlength="20" placeholder="默认标题" value="' + title + '"> <br/>';
                    var content = '<div>' + html + '</div>';

                    layer.open({
                        id: 5,
                        type: 1,
                        title: '修改标题',
                        skin: 'layui-layer-prompt',
                        content: content,
                        btn: ['确定', '取消'],
                        shadeClose: true, //点击遮罩关闭
                        move: false,
                        area: ['400px', '170px'],

                        btn2: function(index, layero) {
                            layer.close(index);
                        },
                        btn1: function(index, layero) {
                            var exploredata = {};
                            var name = $('#myTitle').val();
                            // if (!name) {
                            //     layer.msg('请输入标题', {
                            //         shade: 0.3,
                            //         time: 1000 // 1秒关闭
                            //     });
                            //     return;
                            // }
                            _this.totalData[$('.chartTab .active').index()].pictureChart.title = name;
                            if (name) {
                                _this.totalData[$('.chartTab .active').index()].pictureChart.hasCustomName = true;
                            } else {
                                _this.totalData[$('.chartTab .active').index()].pictureChart.hasCustomName = false;
                            }


                            layer.close(index);


                            var obj = _this.totalData[$('.chartTab .active').index()];

                            obj.dimensionSelected = _this.dimensionSelected;
                            obj.measureSelected = _this.measureSelected;

                            _this.getSearchData(function() {
                                // 重画图
                                // _this.drawCharts(obj.chartType, false, obj);
                                _this.drawCharts(obj.chartType, false, undefined, function() {});
                                // 重画表
                                // _this.drawTables();
                            });
                            // }
                            // item.pictureChart.resize();
                        },
                    });
                });

                // 全屏图
                $('.chartTab').on('click', '.fullScreenBtn', function(e) {
                    var $this = $(e.currentTarget);
                    var $div = $this.parent();

                    // 关闭全屏
                    if ($this.hasClass('closeFullScreen')) {
                        $this.removeClass('closeFullScreen');
                        $this.siblings('button').show();

                        $div.removeClass('fullscreenDiv');
                        $('.echartContainer').css({
                            position: 'relative'
                        });

                        // var oldWidth = $div.attr('oldWidth');
                        // var oldHeight = $div.attr('oldHeight');

                        // oldWidth = parseInt(oldWidth) + 18;
                        // oldHeight = parseInt(oldHeight) + 18;

                        // $div.css({
                        //     position: 'relative',
                        //     // width: oldWidth + 'px',
                        //     width: '50%',
                        //     height: oldHeight + 'px',
                        //     'z-index': 98
                        // });
                        // $('#hideBtn').click().click();
                        $('#contentLeft').css({
                            width: '451px'
                        });
                    } else {
                        // 全屏
                        $this.addClass('closeFullScreen');
                        $this.siblings('button').hide();
                        $div.addClass('fullscreenDiv');
                        $('.echartContainer').css({
                            position: 'absolute'
                        });

                        // var oldWidth = $div.width();
                        // var oldHeight = $div.height();
                        // $div.attr({
                        //     oldWidth: oldWidth,
                        //     oldHeight: oldHeight
                        // });

                        // var width = $(window).width();
                        // var height = $(window).height();
                        // $div.css({
                        //     position: 'fixed',
                        //     top: 0,
                        //     left: 0,
                        //     // width: width + 'px',
                        //     // height: height + 'px',
                        //     width: '100%',
                        //     height: '100%',
                        //     'z-index': 99
                        // });

                        $('#contentLeft').css({
                            width: '450px'
                        });
                    }
                    e.stopPropagation();
                });

                // 删除图
                $('.chartTab').on('click', '.close', function(e) {
                    var $this = $(e.currentTarget);
                    var $div = $this.parent();
                    _this.totalData.splice($div.index(), 1);
                    $div.remove();
                });

                $(document).bind("contextmenu", function(e) {
                    return false;
                });

            },

            // 设为筛选器(全局)(re)
            setGlobalFilterData(key, value, obj, noDrawIndex) {
                var filterText = key + '=\'' + value + '\'';
                var _this = this;
                console.log(obj);
                ////// this.drawHistory(this.totalData);
                var totalData = this.totalData.map(function(item, index) {
                    // dataBaseSelected
                    // tableTypeSelected
                    // tableDataSelected
                    if (item.dataBaseSelected == obj.dataBaseSelected &&
                        item.tableTypeSelected == obj.tableTypeSelected &&
                        item.tableDataSelected == obj.tableDataSelected &&
                        noDrawIndex != index &&
                        item.filterdata.indexOf(filterText) == -1
                    ) {
                        if (item.filterdata) {
                            var hasOld = false;
                            var arr = item.filterdata.split(' ');
                            var filterTextNew = arr.map(function(ite, ind) {
                                if (ite.indexOf('=') > -1) {
                                    if (ite.split('=')[0] == key) {
                                        hasOld = true;
                                        return key + "='" + value + "'";
                                    } else {
                                        return ite;
                                    }
                                } else {
                                    return ' ' + ite + ' ';
                                }
                            }).join('');

                            if (!hasOld) {
                                item.filterdata += ' and ' + filterText;
                            } else {
                                item.filterdata = filterTextNew;
                            }
                        } else {
                            item.filterdata = filterText;
                        }
                        _this.afterAddFilter(item);
                        // alert('第' + index + '个重绘');
                        if ($('.echartContainer').eq(index).hasClass('active')) {
                            _this.filterdata = filterText;
                        }
                    }
                    return item;
                });
                this.totalData = totalData;
                // alert('设了哦QYQ');
            },

            // (re)
            toast(msg) {
                layui.use('layer', function() {
                    layer.msg(msg, {
                        shade: 0.3,
                        time: 2000
                    });
                });
            },

            // 获取可查询的数据库名称列表(re)
            GetDataBaseList() {
                var _this = this;
                $.ajax({
                    type: 'post',
                    async: false,
                    url: "/BaseAshx/SmartStatistics/ExploreDataNew.ashx",
                    data: {
                        mtype: "ExploreData_GetDataBaseList"
                    },
                    datatype: 'json',
                    success: function(res) {
                        if (typeof res == 'string') {
                            res = JSON.parse(res);
                        }
                        if (res.code == 200) {
                            _this.dataBaseList = res.data;
                            _this.dataBaseSelected = _this.dataBaseList[0].NAME;
                            _this.getInitialDataList(_this.dataBaseSelected);
                        } else {
                            _this.toast(res.exp || '数据库名称列表获取失败!');
                        }
                    },
                    error: function(err) {
                        console.log(err);
                        if (err.status == 405) {
                            _this.toast('未登录, 请先登录');
                            top.location.href = '/login/LoginNew.aspx';
                        } else {
                            _this.toast('数据库名称列表获取失败!');
                        }
                    }
                });
            },

            // 获取初始化数据(re)
            getInitialDataList(dbName) {
                var _this = this;
                $.ajax({
                    type: 'post',
                    async: false,
                    url: '/BaseAshx/SmartStatistics/ExploreDataNew.ashx',
                    timeout: 1000, //超时时间设置，单位毫秒
                    data: {
                        mtype: "ExploreData_InitialDataList",
                        dbname: dbName,
                    },
                    datatype: 'json',
                    success: function(res) {
                        var html = `<option value="">直接选择或搜索选择</option>`;
                        if (typeof res == 'string') {
                            res = JSON.parse(res);
                        }
                        if (res.code == 200) {
                            _this.InitialDataList[_this.dataBaseSelected] = res.data;
                            if (_this.tableTypeSelected == '0') {
                                _this.tableDataList = _this.InitialDataList[_this.dataBaseSelected].dbTable;
                            } else {
                                _this.tableDataList = _this.InitialDataList[_this.dataBaseSelected].historyTable;
                            }
                            _this.tableDataList.map(function(item, index) {

                                html += `<option value="` + item.TABLE_NAME + `">` + item.TABLE_ALIAS + `</option>`;
                            });
                        } else {
                            // _this.toast('初始化数据获取失败!');
                        }

                        // $('#tableDataList').html(html);
                        layui.use('form', function() {
                            var form = layui.form;
                            form.render('select');
                        });
                        _this.tableDataSelected = '';
                        setTimeout(() => {
                            // updateTableDataList();
                        }, 500);
                    },
                    error: function(err) {
                        console.log(err);
                        _this.toast('初始化数据获取失败!');
                    }
                });
            },

            // 获取获取维度、度量(re)
            getMeasureAndDimension(obj, callback) {
                var myObj = {};
                if (obj) {
                    myObj = obj;
                } else {
                    myObj = this;
                }

                var _this = this;
                // _this.dimensionSelected = [];
                // _this.measureSelected = [];
                $('.dragUl').html('');
                $('.dimensionList, .measureList').hide();
                $('.noData').show();

                if (!myObj.tableDataSelected || !myObj.tableTypeSelected || !myObj.dataBaseSelected) {
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    url: '/BaseAshx/SmartStatistics/ExploreDataNew.ashx',
                    data: {
                        mtype: 'ExploreData_GetMeasureAndDimension',
                        tablename: myObj.tableDataSelected,
                        type: myObj.tableTypeSelected,
                        dbname: myObj.dataBaseSelected
                    },
                    datatype: 'json',
                    success: function(res) {
                        if (typeof res == 'string') {
                            res = JSON.parse(res);
                        }
                        if (res.code == 200) {
                            if (res.data.dimension == '') {
                                res.data.dimension = [];
                                $('.dimensionList').hide();
                                $('.dimensionList').siblings('.noData').show();
                            } else {
                                res.data.dimension = JSON.parse(res.data.dimension);
                                $('.dimensionList').show();
                                $('.dimensionList').siblings('.noData').hide();
                            }
                            var dimensionHtml = '';
                            res.data.dimension.map(function(item) {
                                _this.dimensionList.push(item);
                                dimensionHtml += `<li class="ellipsis" title="` + item.FIELDNAME + `">` + item.COLUMN_NAME + `</li>`;
                                $('.dimensionList').html(dimensionHtml);
                            });
                            if (!drag1) {
                                drag1 = new Drag('contentLeftContent1', function() {
                                    _this.dimensionSelected = [];
                                    $('.dimensionListSelected li').each(function(index, item) {
                                        _this.dimensionSelected.push({
                                            'COLUMN_NAME': $(this).html(),
                                            'FIELDNAME': $(this).attr('title')
                                        });
                                    });
                                });
                            }

                            if (res.data.measure == '') {
                                res.data.measure = [];
                                $('.measureList').hide();
                                $('.measureList').siblings('.noData').show();
                            } else {
                                res.data.measure = JSON.parse(res.data.measure);
                                $('.measureList').show();
                                $('.measureList').siblings('.noData').hide();
                            }
                            var measureHtml = '';
                            res.data.measure.map(function(item) {
                                _this.measureList.push(item);
                                measureHtml += `<li class="ellipsis" title="` + item.FIELDNAME + `">` + item.COLUMN_NAME + `</li>`;
                                $('.measureList').html(measureHtml);
                            });
                            if (!drag2) {
                                drag2 = new Drag('contentLeftContent2', function() {
                                    _this.measureSelected = [];
                                    $('.measureListSelected li').each(function(index, item) {
                                        _this.measureSelected.push({
                                            'COLUMN_NAME': $(this).html(),
                                            'FIELDNAME': $(this).attr('title')
                                        });
                                    });
                                });
                            }
                        } else {
                            _this.toast('维度、度量数据获取失败!');
                        }

                        if (callback) {
                            callback();
                        }
                    },
                    error: function(err) {
                        console.log(err);
                        _this.toast('维度、度量数据获取失败!');
                    }
                });
                if (obj) {
                    return;
                }
                _this.dimensionList = _this.dimensionList.splice(0, _this.dimensionList.length);
                _this.measureList = _this.measureList.splice(0, _this.measureList.length);
            },

            // 更新图表按钮状态(re)
            updateChartButtons() {
                var dimension = this.dimensionSelected.length;
                var measure = this.measureSelected.length;
                var result = [];
                switch (dimension) {
                    case 1:
                        switch (measure) {
                            case 0:
                                break;

                            case 1:
                                result = [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 13];
                                break;

                            default:
                                result = [1, 3, 5, 6, 8, 11, 13];
                                break;
                        }
                        break;

                    case 2:
                        switch (measure) {
                            case 1:
                                result = [1, 3, 5, 8, 10, 11, 12];
                                break;

                            default:
                                break;
                        }
                        break;

                    default:
                        break;
                }
                var arr = this.chartBtn.map(function(item, index) {
                    if (result.indexOf(item.id) >= 0) {
                        item.canUse = true;
                    } else {
                        item.canUse = false;
                    }
                    return item;
                });
                this.chartBtn = arr;
                this.ChartButtonsState = result;
                // if (this.ChartButtonsState.length == 0 && $('.chartTab .active').length) {
                //     // this.toast('在当前维度和度量条件下无法显示图表, 请更换维度和度量条件');
                //     // this.drawCharts(undefined, true);
                // }
                return result;
            },

            // 形成数据探索统计数据(请求最终数据)(re)
            getSearchData(callback, obj) {
                this.nowData = [];
                this.nowDataNew = [];
                var thisData = this;
                if (obj) {
                    thisData = obj;
                } else {
                    thisData = this;
                }
                var _this = this;

                // alert('请求数据');
                var strhang = thisData.dimensionSelected.map(function(item, index) {
                    return item.FIELDNAME;
                }).join(',');
                var strlie = thisData.measureSelected.map(function(item, index) {
                    return item.FIELDNAME;
                }).join(',');

                if (!thisData.dimensionSelected.length || !thisData.measureSelected.length) {
                    return;
                }

                $.ajax({
                    type: 'post',
                    async: false,
                    url: '/BaseAshx/SmartStatistics/ExploreDataNew.ashx',
                    data: {
                        "mtype": "ExploreData_SearchData",

                        "dataBaseSelected": thisData.dataBaseSelected, // 所选数据库名称,
                        "tableTypeSelected": thisData.tableTypeSelected,
                        "tableDataSelected": thisData.tableDataSelected,
                        "dimensionSelected": JSON.stringify(thisData.dimensionSelected),
                        "measureSelected": JSON.stringify(thisData.measureSelected),
                        "aggregate": thisData.aggregate,
                        "filterdata": thisData.filterdata,

                        // mtype: "ExploreData_SearchData",
                        // tablename: thisData.tableDataSelected,
                        // type: thisData.tableTypeSelected,
                        // strhang: strhang,
                        // strlie: strlie,
                        // filterdata: thisData.filterdata, // 过滤条件
                        // aggregate: thisData.aggregate,
                        // dbname: thisData.dataBaseSelected, // 所选数据库名称
                    },
                    datatype: 'json',
                    success: function(res) {
                        var resArr = res.split('||');
                        _this.dic = '';
                        if (resArr.length == 3) {
                            _this.dic = JSON.parse(resArr[2].split('^_^')[0]);
                        }
                        // console.log(res);
                        if (resArr.length == 0) {
                            _this.toast(res);
                        } else {
                            _this.nowData = resArr[0];
                            _this.nowDataNew = JSON.parse(res.split('^_^')[1]).data;
                            // 先不用
                            // if ($('.chartTab .active').length) {
                            //     _this.drawCharts(_this.chartType);
                            // }
                            // _this.drawTables(_this.chartType);
                            // console.log(_this.nowData);
                        }
                        callback && callback();
                    },
                    error: function(err) {
                        console.log(err);
                    }
                });
            },

            // 点击图表按钮(re)
            clickChartBtn(index, e) {
                if ($('.chartTab .active').length) {
                    if (this.totalData.length > this.maxChart) {
                        this.toast('最多同时显示' + this.maxChart + '张图');
                        return;
                    }
                } else if (this.totalData.length >= this.maxChart) {
                    this.toast('最多同时显示' + this.maxChart + '张图');
                    return;
                }
                var $btn = $(e.currentTarget);
                this.chartType = index + 1;
                if (!$btn.hasClass('disable')) {
                    this.drawCharts();
                    this.drawTables();
                }
            },

            // 增加筛选器后的重绘
            afterAddFilter(obj) {
                var _this = this;
                var id;
                var div;
                var pictureChart;
                var title;
                var hasCustomName = false;
                // 重绘
                pictureChart = obj.pictureChart;
                id = obj.id;
                title = obj.pictureChart.title || '';
                if (title) {
                    hasCustomName = true;
                }
                if (pictureChart != null && pictureChart != "" && pictureChart != undefined) {
                    pictureChart.dispose();
                }
                // 重新初始化echart
                // document.getElementById(id).removeAttribute('_echarts_instance_'); // 移除容器上的 _echarts_instance
                div = $('#' + id)[0];

                pictureChart = echarts.init(div, _this.theme);
                pictureChart.title = title;
                pictureChart.hasCustomName = hasCustomName;

                // pictureChart = echarts.init(div,'dark');
                // pictureChart = echarts.init(document.getElementById('testEcharts'),'dark');
                // div = $('.chartTab .active>div')[0];
                obj.pictureChart = pictureChart;
                obj.id = id;

                // 获取数据
                _this.getSearchData(function() {
                    // 画图后续
                    _this.drawChartsNext(pictureChart, obj.chartType, obj);
                }, obj);

                // 更新存
                return obj;
            },

            // 画图
            drawCharts(index, noDraw, dataObj, callback) {
                var _this = this;
                if (!index) {
                    index = this.chartType;
                }

                var saveData;
                if (dataObj) {
                    saveData = dataObj;
                } else {
                    saveData = {
                        "dataBaseSelected": this.dataBaseSelected,
                        "tableTypeSelected": this.tableTypeSelected,
                        "tableDataSelected": this.tableDataSelected,
                        "dimensionSelected": this.dimensionSelected,
                        "measureSelected": this.measureSelected,
                        "chartType": index || this.totalData[$('.chartTab .active').index()].index,
                        "filterdata": this.filterdata,
                        "aggregate": this.aggregate,
                    };
                }
                var id;
                var div;
                var pictureChart;
                if ($('.chartTab .active').length == 0) {
                    // 新绘
                    id = 'id_' + Number(Math.random().toString().substr(3, 6) + Date.now()).toString(36);
                    // 安排画布
                    var html = '<div class="echartContainer"><div class="echartContent" style="overflow:hidden" chartType="" id="' + id + '"></div><button class="changeTitle" title="修改标题"><button class="toMapBtn" title="地图"></button><button class="fullScreenBtn" title="全屏/恢复"></button><button class="close" title="关闭"></button></div>';
                    // var html = '<div class="echartContainer"><div class="echartContent" chartType="" id="' + id + '"></div><button class="close"></button></div>';
                    $('.chartTab').append(html);
                    div = $('#' + id)[0];
                    pictureChart = echarts.init(div, _this.theme);
                    var title = this.title;
                    if (title) {
                        pictureChart.hasCustomName = true;
                    } else {
                        title = '按';
                        saveData.dimensionSelected.map(function(item, index, arr) {
                            title += item.COLUMN_NAME;
                            if (arr.length != index + 1) {
                                title += '、';
                            }
                        });
                        title += '的';
                        saveData.measureSelected.map(function(item, index, arr) {
                            title += item.COLUMN_NAME;
                            if (arr.length != index + 1) {
                                title += '、';
                            }
                        });
                        title += '统计';
                        pictureChart.hasCustomName = false;
                    }
                    pictureChart.title = title;

                    // pictureChart = echarts.init(div,'dark');
                    // pictureChart = echarts.init(document.getElementById('testEcharts'),'dark');

                    saveData.pictureChart = pictureChart;
                    saveData.id = id;
                    saveData.nowData = this.nowData;
                    // 存
                    this.totalData.push(saveData);
                } else {
                    // 重绘
                    // id = 'id_' + Number(Math.random().toString().substr(3, 6) + Date.now()).toString(36);
                    pictureChart = this.totalData[$('.chartTab .active').index()].pictureChart;
                    id = this.totalData[$('.chartTab .active').index()].id;
                    var hasCustomName = pictureChart.hasCustomName;

                    if (pictureChart != null && pictureChart != "" && pictureChart != undefined) {
                        pictureChart.dispose();
                    }
                    title = '';
                    // 重新初始化echart
                    // document.getElementById(id).removeAttribute('_echarts_instance_'); // 移除容器上的 _echarts_instance
                    div = $('#' + id)[0];

                    if (hasCustomName) {
                        title = pictureChart.title;
                    } else {
                        title = '按';
                        this.totalData[$('.chartTab .active').index()].dimensionSelected.map(function(item, index, arr) {
                            title += item.COLUMN_NAME;
                            if (arr.length != index + 1) {
                                title += '、';
                            }
                        });
                        title += '的';
                        this.totalData[$('.chartTab .active').index()].measureSelected.map(function(item, index, arr) {
                            title += item.COLUMN_NAME;
                            if (arr.length != index + 1) {
                                title += '、';
                            }
                        });
                        title += '统计';
                    }
                    pictureChart = echarts.init(div, _this.theme);
                    pictureChart.title = title;
                    pictureChart.hasCustomName = hasCustomName;


                    // pictureChart = echarts.init(div,'dark');
                    // pictureChart = echarts.init(document.getElementById('testEcharts'),'dark');

                    // div = $('.chartTab .active>div')[0];
                    saveData.pictureChart = pictureChart;
                    saveData.id = id;
                    saveData.nowData = this.nowData;
                    // 更新存
                    this.totalData[$('.chartTab .active').index()] = saveData;
                }
                // console.log(this.totalData);

                if (noDraw) {
                    return;
                }

                if ($('.chartTab .active').length) {
                    // 画图后续
                    this.drawChartsNext(pictureChart, index, saveData);
                    return;
                } else {
                    // 画图后续
                    this.drawChartsNext(pictureChart, index);
                }

                // 滚动到底部
                $('.chartTab').animate({
                    scrollTop: ($('.echartContainer').height() + 20) * Math.ceil($('.chartTab .echartContainer').length / 2) - $('.chartTab').height()
                }, 200);

                if (callback) {
                    callback();
                }
            },

            // 画图后续
            drawChartsNext(pictureChart, index, obj) {
                // 处理数据
                var data = JSON.parse(this.nowData);

                var _this;
                if (obj) {
                    _this = obj;
                    index = obj.chartType;
                } else {
                    _this = this;
                }
                if (_this.dimensionSelected.length == 1 && _this.measureSelected.length == 1) {
                    var yData = [];
                    var datavalue = [];
                    for (var i = 0; i < data.length; i++) {
                        for (var j in data[i]) {
                            if (j.toString() == _this.dimensionSelected[0].FIELDNAME)
                                yData.push(data[i][j]);
                            if (j.toString() == _this.measureSelected[0].FIELDNAME)
                                datavalue.push(parseFloat(data[i][j]));
                        }
                    }

                    // 画表格
                    // alert('画表格了!');
                    // createTable(yData, datavalue);

                    // 画图
                    switch (index) {
                        case 1:
                            showBarOrLine(yData, datavalue, pictureChart, "bar", "1对1");
                            break;
                        case 2:
                            showPieOrRing(yData, datavalue, pictureChart, "70%");
                            break;
                        case 3:
                            showBarOrLine(yData, datavalue, pictureChart, "line", "1对1");
                            break;
                        case 4:
                            showTreeMap(yData, datavalue, pictureChart);
                            break;
                        case 5:
                            showAreaLine(yData, datavalue, pictureChart, "1对1");
                            break;
                        case 6:
                            showRadar(yData, datavalue, pictureChart, "1对1");
                            break;
                        case 7:
                            showPieOrRing(yData, datavalue, pictureChart, ['50%', '70%']);
                            break;
                        case 8:
                            showPolarCoordinates(yData, datavalue, pictureChart, "1对1");
                            break;
                        case 9:
                            showFunnel(yData, datavalue, pictureChart);
                            break;
                        case 11:
                            showScatter(yData, datavalue, pictureChart, "bar", "1对1");
                            break;

                        case 13:
                            showUnion(_this.nowDataNew, pictureChart);
                            break;

                        default:
                            break;
                    }
                } else {
                    var n1 = _this.dimensionSelected.length;
                    var n2 = _this.measureSelected.length;
                    var xname = [];
                    var yvalue = [];
                    for (var i = 0; i < n1; i++) {
                        xname.push([]);
                    }
                    for (var i = 0; i < n2; i++) {
                        yvalue.push([]);
                    }
                    for (var i = 0; i < data.length; i++) {
                        for (var j in data[i]) {
                            for (var k = 0; k < n1; k++) {
                                if (j.toString() == _this.dimensionSelected[k].FIELDNAME)
                                    xname[k].push(data[i][j]);
                            }
                            for (var l = 0; l < n2; l++) {
                                if (j.toString() == _this.measureSelected[l].FIELDNAME)
                                    yvalue[l].push(parseFloat(data[i][j]));
                            }
                        }
                    }

                    var ul3 = _this.dimensionSelected.length;
                    var ul4 = _this.measureSelected.length;
                    var onlyTable = false;
                    // 画图和表
                    switch (index) {
                        case 1:
                            if (ul3 == 1) {
                                // createTable3(xname, yvalue);
                                if (onlyTable) {
                                    return;
                                }
                                showBarOrLine(xname, yvalue, pictureChart, "bar", "1对n", _this);
                            } else if (ul3 >= 2 && ul4 == 1) {
                                // createTable4(xname, yvalue, dic);
                                if (onlyTable) {
                                    return;
                                }
                                showBarOrLine(xname, yvalue, pictureChart, "bar", "2对1");
                            } else {
                                showDataErr();
                            }
                            break;
                        case 3:
                            if (ul3 == 1) {
                                // createTable3(xname, yvalue);
                                if (onlyTable) {
                                    return;
                                }
                                showBarOrLine(xname, yvalue, pictureChart, "line", "1对n", _this);
                            } else if (ul3 >= 2 && ul4 == 1) {
                                // createTable4(xname, yvalue, dic);
                                if (onlyTable) {
                                    return;
                                }
                                showBarOrLine(xname, yvalue, pictureChart, "line", "2对1");
                            } else {
                                showDataErr();
                            }
                            break;
                        case 5:
                            if (ul3 == 1) {
                                // createTable3(xname, yvalue);
                                if (onlyTable) {
                                    return;
                                }
                                showAreaLine(xname, yvalue, pictureChart, "1对n");
                            } else if (ul3 >= 2 && ul4 == 1) {
                                // createTable4(xname, yvalue, dic);
                                if (onlyTable) {
                                    return;
                                }
                                showAreaLine(xname, yvalue, pictureChart, "2对1");
                            } else {
                                showDataErr();
                            }
                            break;
                        case 6:
                            if (ul3 == 1) {
                                // createTable3(xname, yvalue);
                                if (onlyTable) {
                                    return;
                                }
                                showRadar(xname, yvalue, pictureChart, "1对n", _this);
                            } else {
                                showDataErr();
                            }
                            // 以前就注释掉了
                            //else if ($("#ul3")[0].children.length == 2 && $("#ul4")[0].children.length == 1) {
                            //    showAreaLine(xname, yvalue, pictureChart, "2对1");
                            //    createTable2(xname, yvalue, data);
                            //}                
                            break;
                        case 8:
                            if (ul3 == 1) {
                                // createTable3(xname, yvalue);
                                if (onlyTable) {
                                    return;
                                }
                                showPolarCoordinates(xname, yvalue, pictureChart, "1对n");
                            } else if (ul3 >= 2 && ul4 == 1) {
                                // createTable4(xname, yvalue, dic);
                                if (onlyTable) {
                                    return;
                                }
                                showPolarCoordinates(xname, yvalue, pictureChart, "2对1");
                            } else {
                                showDataErr();
                            }
                            break;

                        case 10:
                            if (ul3 == 2 && ul4 == 1) {
                                if (onlyTable) {
                                    return;
                                }
                                showSankey(xname, yvalue, data, pictureChart);
                            } else {
                                showDataErr();
                            }
                            break;

                        case 11:
                            if (ul3 == 1) {
                                // createTable3(xname, yvalue);
                                if (onlyTable) {
                                    return;
                                }
                                showScatter(xname, yvalue, pictureChart, "bar", "1对n", _this);
                            } else if (ul3 >= 2 && ul4 == 1) {
                                // createTable4(xname, yvalue, dic);
                                if (onlyTable) {
                                    return;
                                }
                                showScatter(xname, yvalue, pictureChart, "bar", "2对1");
                            } else {
                                showDataErr();
                            }
                            break;

                        case 12:
                            if (ul3 == 2 && ul4 == 1) {
                                if (onlyTable) {
                                    return;
                                }
                                showChordal(xname, yvalue, data, pictureChart);
                            } else {
                                showDataErr();
                            }
                            break;

                        case 13:
                            if (ul3 == 1) {
                                if (onlyTable) {
                                    return;
                                }
                                showUnion(_this.nowDataNew,pictureChart);
                            } else {
                                showDataErr();
                            }
                            break;

                        default:
                            showDataErr();
                    }
                }
            },

            // 画表
            drawTables(myData) {
                var dic = this.dic;

                var index = this.chartType;
                // 处理数据
                var data;
                if (this.nowData.length) {
                    data = JSON.parse(this.nowData);
                } else {
                    return;
                }

                if (this.dimensionSelected.length == 1 && this.measureSelected.length == 1) {
                    var yData = [];
                    var datavalue = [];
                    for (var i = 0; i < data.length; i++) {
                        for (var j in data[i]) {
                            if (j.toString() == this.dimensionSelected[0].FIELDNAME)
                                yData.push(data[i][j]);
                            if (j.toString() == this.measureSelected[0].FIELDNAME)
                                datavalue.push(parseFloat(data[i][j]));
                        }
                    }
                    // 画表
                    // alert('画表格了!');
                    createTable(yData, datavalue);
                } else {
                    var n1 = this.dimensionSelected.length;
                    var n2 = this.measureSelected.length;
                    var xname = [];
                    var yvalue = [];
                    for (var i = 0; i < n1; i++) {
                        xname.push([]);
                    }
                    for (var i = 0; i < n2; i++) {
                        yvalue.push([]);
                    }
                    for (var i = 0; i < data.length; i++) {
                        for (var j in data[i]) {
                            for (var k = 0; k < n1; k++) {

                                if (j.toString() == this.dimensionSelected[k].FIELDNAME)
                                    xname[k].push(data[i][j]);
                            }
                            for (var l = 0; l < n2; l++) {
                                if (j.toString() == this.measureSelected[l].FIELDNAME)
                                    yvalue[l].push(parseFloat(data[i][j]));
                            }
                        }
                    }

                    var ul3 = this.dimensionSelected.length;
                    var ul4 = this.measureSelected.length;

                    if (ul3 == 1) {
                        createTable3(xname, yvalue);
                    } else if (ul3 >= 2 && ul4 == 1) {
                        createTable4(xname, yvalue, dic);
                    } else {
                        showDataErr('无数据, 请更改维度 度量等参数');
                    }
                    return;
                }
            },

            // 清空页面(re)
            cleanUp(e) {
                if ($(e.currentTarget).hasClass('unable')) {
                    return
                }
                location.href = '/BasePlatform/SmartStatistics/BasicStaticsNew.html';
            },

            // 存储序列化
            saveData() {
                if (!this.totalData.length) {
                    return;
                }

                var content;
                var newSave;
                var id = getUrlParam('id');
                if (id) {
                    content = '<div>' + "确定要保存当前序列化吗?" + '</div>';
                    newSave = false;
                } else {
                    var html = '<span>' + '名称' + '：</span><input id="myName" type="text" class="layui-layer-input" maxlength="20"> <br/>';
                    content = '<div>' + html + '</div>';
                    newSave = true;
                }

                layer.open({
                    id: 4,
                    type: 1,
                    title: '保存当前图表序列',
                    skin: 'layui-layer-prompt',
                    content: content,
                    btn: ['确定', '取消'],
                    shadeClose: true, //点击遮罩关闭
                    move: false,
                    area: ['400px', '170px'],

                    btn2: function(index, layero) {
                        layer.close(index);
                    },
                    btn1: function(index, layero) {
                        var exploredata = {};
                        if (newSave) {
                            var name = $('#myName').val();
                            if (!name) {
                                layer.msg('请输入保存名称', {
                                    shade: 0.3,
                                    time: 1000 // 1秒关闭
                                });
                                return;
                            }
                            exploredata.name = name;
                        } else {
                            exploredata.id = id;
                        }

                        var newTotalData = vm.totalData.map(function(item, index) {
                            var obj = {};
                            obj.aggregate = item.aggregate;
                            obj.chartType = item.chartType;
                            obj.dataBaseSelected = item.dataBaseSelected;
                            obj.dimensionSelected = item.dimensionSelected;
                            obj.filterdata = item.filterdata;
                            obj.measureSelected = item.measureSelected;
                            obj.tableDataSelected = item.tableDataSelected;
                            obj.tableTypeSelected = item.tableTypeSelected;
                            obj.title = '';
                            if (item.pictureChart.hasCustomName) {
                                obj.title = item.pictureChart.title;
                            }
                            return obj;
                        });

                        exploredata.data = newTotalData;
                        // exploredata: JSON.stringify({
                        //     name: name,
                        //     data: newTotalData
                        // })

                        $.ajax({
                            type: 'post',
                            async: false,
                            url: '/BaseAshx/SmartStatistics/ExploreDataNew.ashx',
                            data: {
                                mtype: "ExploreData_SaveSerializeInfo",
                                exploredata: JSON.stringify(exploredata)
                            },
                            datatype: 'json',
                            success: function(res) {
                                if (typeof res == 'string') {
                                    res = JSON.parse(res);
                                }
                                if (res.code == '200') {
                                    layer.close(index);
                                    layer.msg(res.msg, {
                                        shade: 0.3,
                                        time: 1000 // 1秒关闭
                                    });
                                    // 保存成功,刷新主页列表
                                    parent.window.getUserDataNameList();

                                } else {
                                    layer.msg(res.msg, {
                                        shade: 0.3,
                                        time: 1000 // 1秒关闭
                                    });
                                }
                                console.log(res);
                            },
                            error: function(err) {
                                console.log(err);
                            }
                        });
                    },
                });
            },

            // 获取序列化
            getData(id, dbname, tablename) {
                var _this = this;
                var mtype = 'ExploreData_GetSaveSerializeInfo';
                if (getUrlParam('isExcavate')) {
                    mtype = 'ExploreData_GetAnalysisResult';
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    url: '/BaseAshx/SmartStatistics/ExploreDataNew.ashx',
                    data: {
                        mtype: mtype,
                        // 假数据
                        id: id,
                        dbname: dbname,
                        tablename: tablename
                    },
                    datatype: 'json',
                    success: function(res) {
                        if (typeof res == 'string') {
                            res = JSON.parse(res);
                        }
                        // console.log(res);
                        if (res.code == 200) {
                            // _this.totalData = res.data;
                            _this.drawHistory(res.data);
                        } else {
                            alert(res.msg);
                        }
                    },
                    error: function(err) {
                        console.log(err);
                    }
                });
            },

            // 还原历史序列化
            drawHistory(data) {
                var _this = this;
                data.map((item, index) => {
                    this.dimensionSelected = item.dimensionSelected;
                    this.measureSelected = item.measureSelected;
                    this.tableDataSelected = item.tableDataSelected;
                    this.tableTypeSelected = item.tableTypeSelected;
                    this.filterdata = item.filterdata;
                    this.aggregate = item.aggregate;
                    this.dataBaseSelected = item.dataBaseSelected;
                    this.chartType = parseInt(item.chartType);
                    this.title = '';
                    this.title = item.title;

                    this.getSearchData(function() {
                        _this.drawCharts(_this.chartType);
                        _this.drawTables(_this.chartType);
                    });
                });
                // setTimeout(() => {
                //     $('.chartTab>div').eq($('.chartTab>div').length - 1).click();
                // }, 2000);

                setTimeout(function() {
                    $('#loadingMask').fadeOut();
                }, 500);
            },

            ArrayIsEqual(arr1, arr2) { //判断2个数组是否相等
                if (arr1 === arr2) { //如果2个数组对应的指针相同，那么肯定相等，同时也对比一下类型
                    return true;
                } else {
                    if (arr1.length != arr2.length) {
                        return false;
                    } else { //长度相同
                        for (let i in arr1) { //循环遍历对比每个位置的元素
                            if (arr1[i] != arr2[i]) { //只要出现一次不相等，那么2个数组就不相等
                                return false;
                            }
                        } //for循环完成，没有出现不相等的情况，那么2个数组相等
                        return true;
                    }
                }
            },

            isObjectValueEqual(a, b) {
                //取对象a和b的属性名
                var aProps = Object.getOwnPropertyNames(a);
                var bProps = Object.getOwnPropertyNames(b);
                //判断属性名的length是否一致
                if (aProps.length != bProps.length) {
                    return false;
                }
                //循环取出属性名，再判断属性值是否一致
                for (var i = 0; i < aProps.length; i++) {
                    var propName = aProps[i];
                    if (a[propName] !== b[propName]) {
                        return false;
                    }
                }
                return true;
            },

            // 打包压缩图片
            packageImages(imgs) {
                if (!this.totalData.length) {
                    return;
                }
                var _this = this;
                var r = confirm('全部导出图表');
                if (r == true) {
                    var zip = new JSZip();
                    var img = zip.folder("images");

                    _this.totalData.map(function(item, index) {
                        var imgBase64 = item.pictureChart.getDataURL({
                            // 导出的格式，可选 png, jpeg
                            type: 'jpeg',
                            // 导出的图片背景色，默认使用 option 里的 backgroundColor
                            backgroundColor: '#2d3041',
                            // 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
                            excludeComponents: ['toolbox']
                        }).split(',')[1];
                        var name = '图' + (index + 1) + '.png';

                        img.file(name, imgBase64, {
                            base64: true
                        });

                        zip.generateAsync({
                            type: "blob"
                        }).then(function(content) {
                            if (index + 1 == _this.totalData.length) {
                                saveAs(content, "images.zip");
                            }
                        });
                    });
                }
            },

        },

        // 一个数据受多个数据影响(有缓存)(re)
        computed: {
            getSelecteds() {
                const {
                    dataBaseSelected,
                    tableTypeSelected,
                    tableDataSelected
                } = this;
                return {
                    dataBaseSelected,
                    tableTypeSelected,
                    tableDataSelected
                };
            },

            getDataOptions() {
                const {
                    dimensionSelected,
                    measureSelected,
                    filterdata,
                    aggregate,
                } = this;
                return {
                    dimensionSelected,
                    measureSelected,
                    filterdata,
                    aggregate,
                };
            }
        },

        // 一个数据影响多个数据(re)
        watch: {
            getSelecteds: {
                handler: function(val, valOld) {
                    this.selectChanged = true;
                    var _this = this;
                    // console.warn('getSelecteds change:', val);
                    if ($('.chartTab .active').length) {
                        var obj = _this.totalData[$('.chartTab .active').index()];
                        // dataBaseSelected,
                        // tableTypeSelected,
                        // tableDataSelected,
                        if (val.dataBaseSelected == obj.dataBaseSelected &&
                            val.tableTypeSelected == obj.tableTypeSelected &&
                            val.tableDataSelected == obj.tableDataSelected) {
                            _this.getMeasureAndDimension(obj, function() {
                                $('.dimensionListSelected, .measureListSelected').html('');
                                obj.dimensionSelected.map(function(item, index) {
                                    $('.dimensionListSelected').append('<li title="' + item.FIELDNAME + '" style="">' + item.COLUMN_NAME + '</li>');
                                    $('.dimensionList li[title="' + item.FIELDNAME + '"]').remove();
                                });
                                obj.measureSelected.map(function(item, index) {
                                    $('.measureListSelected').append('<li title="' + item.FIELDNAME + '" style="">' + item.COLUMN_NAME + '</li>');
                                    $('.measureList  li[title="' + item.FIELDNAME + '"]').remove();
                                });
                            });
                        } else {
                            this.getMeasureAndDimension(undefined, function() {
                                $('.chartTab .active canvas').remove();
                                obj.dataBaseSelected = val.dataBaseSelected;
                                obj.tableTypeSelected = val.tableTypeSelected;
                                obj.tableDataSelected = val.tableDataSelected;

                                obj.dimensionSelected = [];
                                obj.measureSelected = [];
                            });
                        }
                    } else {
                        this.getMeasureAndDimension();
                    }
                    this.updateChartButtons();
                    this.nowData = [];
                    $('#myTable').html('');
                    $('#chartTab').click();

                    // this.dimensionSelected.length = [];
                    // this.measureSelected.length = [];
                    if ($('.dimensionListSelected li').length == 0 || $('.measureListSelected li').length == 0) {
                        this.chartBtn.map(function(item, index) {
                            item.canUse = false;
                        });
                    }
                },
                deep: true
            },

            getDataOptions: {
                handler: function(val, valOld) {
                    if (this.selectChanged) {
                        this.selectChanged = false;
                        return;
                    }
                    console.warn('getDataOptions change:', val);
                    $('.daochubiaoge').hide();
                    this.updateChartButtons();
                    this.nowData = [];
                    $('#myTable').html('');

                    var _this = this;
                    // setTimeout(function() {
                    if ($('.chartTab .active').length) {
                        $('.chartTab .active canvas').remove();
                        var obj = _this.totalData[$('.chartTab .active').index()];

                        obj.dimensionSelected = _this.dimensionSelected;
                        obj.measureSelected = _this.measureSelected;

                        // _this.dimensionSelected = obj.dimensionSelected;
                        // _this.measureSelected = obj.measureSelected;
                        this.getSearchData(function() {
                            // 重画图
                            // _this.drawCharts(obj.chartType, false, obj);
                            _this.drawCharts(obj.chartType, false, undefined, function() {

                                // _this.getMeasureAndDimension(obj, function () {
                                //     $('.dimensionListSelected, .measureListSelected').html('');
                                //     obj.dimensionSelected.map(function (item, index) {
                                //         $('.dimensionListSelected').append('<li title="' + item.FIELDNAME + '" style="background-color: rgb(0, 148, 255);">' + item.COLUMN_NAME + '</li>');
                                //         $('.dimensionList li[title="' + item.FIELDNAME + '"]').remove();
                                //     });
                                //     obj.measureSelected.map(function (item, index) {
                                //         $('.measureListSelected').append('<li title="' + item.FIELDNAME + '" style="background-color: rgb(0, 148, 255);">' + item.COLUMN_NAME + '</li>');
                                //         $('.measureList  li[title="' + item.FIELDNAME + '"]').remove();
                                //     });
                                // });
                            });
                            // 重画表
                            // _this.drawTables();
                        });
                        // }


                    } else {
                        if (val.dimensionSelected.length && val.measureSelected.length && this.ChartButtonsState.length) {
                            this.getSearchData();
                        }
                    }
                    $('#chartTab').click();
                    // }, 0);


                },
                deep: true
            },

            nowData: function(val) {
                if (this.nowData.length) {
                    console.log('有数据');
                }
            },
        }
    });

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            //return unescape(r[2]);
            return r[2];
        }
        return null;
    }

    $(function() {
        var id = getUrlParam('id');
        var dbname = decodeURIComponent(getUrlParam('dbname'));
        var tablename = decodeURIComponent(getUrlParam('tablename'));

        if (id) {
            if (dbname && tablename) {
                // DLBM like '01%'
                // vm.getData('b484693f-311a-4f21-bbeb-e52663f942c4');
                // vm.getData('bab17250-256f-4f8e-b843-18183c83b8bc');
                vm.getData(id, dbname, tablename);
            } else {
                // DLBM like '01%'
                // vm.getData('b484693f-311a-4f21-bbeb-e52663f942c4');
                // vm.getData('bab17250-256f-4f8e-b843-18183c83b8bc');
                vm.getData(id);
            }
        } else {
            setTimeout(function() {
                $('#loadingMask').fadeOut();
            }, 1000);
        }
    });

    /* 画表专用 */
    // 导出表格
    function downLoadTableToExcel(excelBody, fileName) {
        var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(excelBody);
        var a = document.createElement("a");
        var time = new Date().toLocaleString('chinese', {
            hour12: false
        }).replace(/\/|:| /g, '');
        a.download = fileName + time + '.csv';
        a.href = uri;
        a.click();
    }

    // 判断数据格式
    function judgeValue(value) {
        // return value == '' || value == ' ' || value == undefined ? 'null' : value;
        return value;
    }

    // 刷新表格
    function freshTableHtml(html) {
        var myTableHtml = '<div id="div_container" style="text-align:center;margin:0 auto;"><div id="my_div" class="fakeContainer first_div" style="padding:1px"><table border="1" id="demoTable" style="margin-top:5px;border-collapse: collapse;">';
        myTableHtml += html;
        myTableHtml += '</table></div></div>';
        $('#myTable').html('');
        $('.daochubiaoge').hide();
        $('#myTable').html(myTableHtml);
        $('.daochubiaoge').show();
        afterCreateTable();
    }

    // 创建表格后调用js
    function afterCreateTable() {
        // 调用superTable
        new superTable("demoTable", {
            cssSkin: "sDefault",
            fixedCols: 1, //固定几列
            headerRows: 1, //头部固定行数
            onStart: function() {
                this.start = new Date();
            },
            onFinish: function() {}
        });
        //这个宽度是容器宽度，不同容器宽度不同
        if ($('.sFData').width() < $('#myTable').width()) {
            $("#div_container").width($('.sFData').width() + 2);
        } else {
            $("#div_container").width($('#myTable').width() + 2);
        }
        $(".fakeContainer").height($('#myTable').height()); //这个高度是整个table可视区域的高度，不同情况高度不同
        $(".sData").addClass('scroll');
        //.sData是调用superTables.js之后页面自己生成的  这块就是出现滚动条 达成锁定表头和列的效果
        if ($('.sFData').width() > $('#myTable').width()) {
            $(".sData").width($('#div_container').width() - $('#left-top').outerWidth() - 2); //这块的宽度是用$("#div_container")的宽度减去锁定的列的宽度
        } else {
            $(".sData").width($('.sFData').width() - $('#left-top').outerWidth());
        }
        if ($('.sFData').height() > $('#myTable').height()) {
            $(".sData").height($('#div_container').height() - $('#left-top').outerHeight() - 2); //这块的高度是用$("#div_container")的高度减去锁定的表头的高度
        } else {
            $(".sData").height($('.sFData').height() - $('#left-top').outerHeight());
        }
        //目前谷歌  ie8+  360浏览器均没问题  有些细小的东西要根据项目需求改
        //有兼容问题的话可以在下面判断浏览器的方法里写
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i) == "9.") { //alert("IE 9.0");
        } else if (!!window.ActiveXObject || "ActiveXObject" in window) { //alert("IE 10");

        } else { //其他浏览器
            //alert("其他浏览器");
        }
    }

    // 1-1表格
    function createTable(yData, datavalue) {
        // $('#tableTab').click();

        if (yData.length == 0 || datavalue.length == 0) {
            $('#myTable').html('<div style="text-align: center;">无数据</div>');
            return;
        }
        //console.log(yData,datavalue)
        // 首行表头
        var html = '<tr><th id="left-top" class="biaotou center">' + vm.dimensionSelected[0].COLUMN_NAME + '</th><th class="biaotou center">' + vm.measureSelected[0].COLUMN_NAME + '</th></tr>';
        // 导出表格str
        var str = ',' + vm.measureSelected[0].COLUMN_NAME + '\n';
        yData.forEach(function(x, index) {
            // console.log(x, datavalue[index]);
            html += '<tr><td>' + judgeValue(x) + '</td><td>' + judgeValue(datavalue[index]) + '</td><tr>';
            str += judgeValue(x) + '\t,' + judgeValue(datavalue[index]) + '\t\n';
        });
        freshTableHtml(html);
        $('.daochubiaoge').off('click').on('click', function() {
            if ($('#myTable').html())
                downLoadTableToExcel(str, '表格');
        });

        // $('#chartTab').click();
    }

    // 1-n表格
    function createTable3(yData, datavalue) {
        // $('#tableTab').click();

        if (yData[0].length == 0 || datavalue.length == 0) {
            $('#myTable').html('<div style="text-align: center;">无数据</div>');
            return;
        }
        // console.log(yData, datavalue);
        // 首行表头
        var html = '<tr><th id="left-top" class="biaotou center">' + vm.dimensionSelected[0].COLUMN_NAME + '</th>';
        var str = '';
        // $('#ul4 li').each(function (index, item) {
        //     html += '<th class="biaotou center">' + $(item).html() + '</th>';
        //     str += ',' + $(item).html() + '\t'
        // });
        vm.measureSelected.map(function(item, index) {
            html += '<th class="biaotou center">' + item.COLUMN_NAME + '</th>';
            str += ',' + item.COLUMN_NAME + '\t';
        });
        html += '</tr>';
        str += '\n';

        yData[0].forEach(function(x, index) {
            html += '<tr><td>' + judgeValue(x) + '</td>';
            str += judgeValue(x) + '\t';
            datavalue.forEach(function(item, num) {
                html += '<td>' + judgeValue(datavalue[num][index]) + '</td>';
                str += ',' + judgeValue(datavalue[num][index]) + '\t';
            });
            html += '</tr>';
            str += '\n';
        });
        freshTableHtml(html);
        $('.daochubiaoge').off('click').on('click', function() {
            downLoadTableToExcel(str, '表格');
        });

        // $('#chartTab').click();
    }

    // 2-1表格
    function createTable4(yData, datavalue, data) {
        // $('#tableTab').click();

        if (data.length == 0) {
            $('#myTable').html('<div style="text-align: center;">无数据</div>');
            return;
        }
        //console.log(data);
        var colNameArr = [];
        var rowNameArr = [];
        var totalValueArr = [];
        // 遍历每行
        for (var key in data) {
            rowNameArr.push(judgeValue(key));
            var colValueArr = [];
            for (var i in data[key]) {
                //console.log(i, data[key][i]);
                var value = judgeValue(data[key][i]);
                if (colNameArr.indexOf(i) == -1) {
                    colNameArr.push(i);
                }
                colValueArr[colNameArr.indexOf(i)] = value;
            }
            totalValueArr.push(colValueArr);
        }
        //console.log(colNameArr, totalValueArr)
        var colLength = colNameArr.length;

        // 表格html
        var myTableHtml = '<tr>';
        // 导出表格str
        var str = '';
        // 左 右
        myTableHtml += '<th id="left-top" class="three"><span class="title1">' + vm.dimensionSelected[0].COLUMN_NAME + '</span><span class="title3">' + vm.dimensionSelected[1].COLUMN_NAME + '</span></th>';
        str += vm.dimensionSelected[0].COLUMN_NAME + '\\' + vm.dimensionSelected[1].COLUMN_NAME;
        // 首行表头
        colNameArr.forEach(function(x, index) {
            myTableHtml += '<th class="biaotou center">' + judgeValue(x) + '</th>';
            str += ',' + judgeValue(x);
        });
        myTableHtml += '</tr>';
        str += '\n';
        // 表格主体
        totalValueArr.forEach(function(x, index) {
            myTableHtml += '<tr>';
            // 左侧表头
            myTableHtml += '<td class="biaotou">' + judgeValue(rowNameArr[index]) + '</td>';
            str += judgeValue(rowNameArr[index]);
            for (var i = 0; i < colLength; i++) {
                if (totalValueArr[index][i]) {
                    myTableHtml += '<td class="center">' + judgeValue(totalValueArr[index][i]) + '</td>';
                    str += ',' + judgeValue(totalValueArr[index][i]) + '\t';
                } else {
                    myTableHtml += '<td class="center"></td>';
                    str += ',';
                }
            }
            myTableHtml += '</tr>';
            str += '\n';
        });
        freshTableHtml(myTableHtml);
        $('.daochubiaoge').off('click').on('click', function() {
            downLoadTableToExcel(str, '表格');
        });

        // $('#chartTab').click();
    }

    // 切换主题
    $('#main').on('change', '#themeSelect', function(e) {
        vm.theme = $(this).val();
        updateTheme();
    });
    // 切换聚合条件
    $('#aggregateSelect').on('change', function(e) {
        vm.aggregate = $(this).val();
    });

    function updateTheme() {
        if (vm.totalData.length) {
            $('#loadingMask').show();
            vm.totalData.map(function(item, index) {
                vm.afterAddFilter(item);
                if (index >= vm.totalData.length - 1) {
                    $('#loadingMask').hide();
                }
            });
        }
    }

    /* 画图专用 */
    // Firefox和Chrome早期版本中带有前缀
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    // 选择目标节点
    var target = document.getElementById('contentLeft');
    // 创建观察者对象
    var observer = new MutationObserver(resizeChart);
    // var nowChart = [];

    function resizeChart() {
        vm.totalData.map(function(item, index) {
            item.pictureChart.resize();
        });
    }
    // 配置观察选项:
    var config = {
        // attributes: true, //检测属性变动
        // childList: true, //检测子节点变动
        // characterData: true, //节点内容或节点文本的变动。
        attributeFilter: ['style']
    };
    // 传入目标节点和观察选项
    observer.observe(target, config);
    // 停止观察
    // observer.disconnect();

    // var globalColor = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
    //     '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
    //     '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
    //     '#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'
    // ];

    var titleOption = {
        show: true,
        left: 'center',
        width: '100%',
        // left: 20,
        // right: 20,
        // textAlign: 'center'
    };
    // 1柱状图 3折线图
    function showBarOrLine(xdata, yvalue, chart, way, showway, that) {
        var clickValue;
        var newxdata = [];
        var newydata = [];
        if (showway == "1对n") {
            for (var i = 0; i < yvalue.length; i++) {
                var obj = new Object();
                // obj.name = vm.measureSelected[i].FIELDNAME;
                obj.name = that.measureSelected[i].FIELDNAME;
                obj.type = '' + way;
                obj.data = yvalue[i];
                newydata.push(obj);
            }
            for (var i = 0; i < xdata[0].length; i++) {
                newxdata.push(xdata[0][i]);
            }
        } else if (showway == "1对1") {
            var obj = new Object();
            obj.name = vm.measureSelected[0].FIELDNAME;
            obj.type = '' + way;
            obj.barWidth = '80%';
            obj.data = yvalue;
            newydata.push(obj);
            for (var i = 0; i < xdata.length; i++) {
                newxdata.push(xdata[i]);
            }
        } else if (showway == "2对1") {
            for (var i = 0; i < xdata[0].length; i++) {
                if (newxdata.length == 0)
                    newxdata.push(xdata[0][i]);
                if (xdata[0][i] != newxdata[newxdata.length - 1])
                    newxdata.push(xdata[0][i]); //newxdata放横坐标
            }
            var aNewArr = []; //定义一个临时数组
            for (var i = 0; i < xdata[1].length; i++) { //循环遍历当前数组
                //判断当前数组下标为i的元素是否已经保存到临时数组
                //如果已保存，则跳过，否则将此元素保存到临时数组中
                if (aNewArr.indexOf(xdata[1][i]) == -1) {
                    aNewArr.push(xdata[1][i]);
                }
            }
            var aNewArr2 = [];
            for (var i = 0; i < aNewArr.length; i++) {
                // var arr = [];
                var arr = new Array(newxdata.length);
                aNewArr2.push(arr);
            }

            // aNewArr 城镇村属性码
            // newxdata 地类名称
            // 遍历每一条数据(例如:城镇村属性码)
            for (var i = 0; i < xdata[1].length; i++) {
                // 当前已选维度
                // 城镇村属性码
                var m = aNewArr.indexOf(xdata[1][i]);
                // 地类名称
                var n = newxdata.indexOf(xdata[0][i]);
                aNewArr2[m][n] = yvalue[0][i];
            }

            for (var i = 0; i < aNewArr2.length; i++) {
                var obj = new Object();
                obj.name = aNewArr[i];
                obj.type = "" + way;
                obj.data = aNewArr2[i];
                newydata.push(obj);
            }
        }
        chart.setOption({ //加载数据图表
            title: Object.assign({ text: chart.title }, titleOption),
            // color: globalColor,
            tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            //legend: {
            //    data: aNewArr,
            //    textStyle: {
            //        color: 'white',
            //    }
            //},
            grid: {
                left: '15px',
                right: '20px',
                bottom: '40px',
                top: '40px',
                containLabel: true
            },
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: newxdata,
                axisLabel: {
                    // formatter:'{value}(平方米)',  //给y轴添加单位
                    textStyle: {
                        // color: 'white', // x轴坐标值
                        fontSize: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        // color: 'white' // x轴颜色
                    }
                },
                splitLine: {
                    lineStyle: {
                        // color: 'rgba(170,170,170,1)'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '单位(公顷)',
                axisLabel: {
                    formatter: '{value}', //给y轴添加单位
                    textStyle: {
                        // color: 'white', // y轴坐标值
                        fontSize: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        // color: 'white' // y轴颜色
                    }
                },
            },
            dataZoom: {
                show: true,
                height: 20,
                bottom: 16,
                start: 0,
                end: 50,
                handlecolor: '#ddd',
                handlestyle: {
                    borderColor: '#cacaca',
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#ddd",
                    shadowcolor: "#ddd",
                },
                // filercolor: (1, 0, 0, 0, [{
                //     offset: 0,
                //     color: '#1eb5e5'
                // }, {
                //     offset: 1,
                //     color: '#5ccbb1'
                // }]),
                // backgroundColor: '#295d8e',
                type: 'slider',
            },
            series: newydata,

            formatter: function(val) {
                clickValue = val[0];
                var html = '';
                val.forEach(function(item, index) {
                    var name = item.name;
                    var color = item.color;
                    var seriesName = item.seriesName;
                    var value = item.value || '';
                    if (index == 0) {
                        html += name;
                    }
                    html += `<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:` + color + `;"></span>` + seriesName + `: ` + value;
                });
                return html;
            }
        });
        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart);

        chart.asFilter = false;
        chart.off('click');
        chart.getZr().on('mousedown', function(params) {
            if (!$(chart._dom).hasClass('echartContent')) {
                return;
            }
            console.log(clickValue);
            const pointInPixel = [params.offsetX, params.offsetY];
            if (chart.containPixel('grid', pointInPixel)) {
                var xIndex = chart.convertFromPixel({
                    seriesIndex: 0
                }, [params.offsetX, params.offsetY])[0];
                vm.stopPropagation = true;

                if (params.event.which == 3) {
                    var res;
                    if (chart.asFilter) {
                        res = confirm('取消筛选器');
                        if (res) {
                            chart.asFilter = false;
                        }
                    } else {
                        res = confirm('用作筛选器');
                        if (res) {
                            chart.asFilter = true;
                        }
                    }
                } else {
                    if (chart.asFilter) {
                        vm.toast('已将“' + clickValue.name + '”设为筛选器');
                        var index = $(chart._dom).parent().index();
                        var data = vm.totalData[index];
                        if (data) {
                            vm.setGlobalFilterData(data.dimensionSelected[0].FIELDNAME, clickValue.name, {
                                dataBaseSelected: data.dataBaseSelected,
                                tableTypeSelected: data.tableTypeSelected,
                                tableDataSelected: data.tableDataSelected
                            }, index);
                        }
                    }
                }
            }
        });
    }

    // 2饼图 7环状图
    function showPieOrRing(xdata, yvalue, chart, way) {
        var newData = [];
        for (var i = 0; i < xdata.length; i++) {
            var obj = new Object();
            obj.name = xdata[i];
            obj.value = yvalue[i];
            newData.push(obj);
        }
        chart.setOption({
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            tooltip: {
                show: true
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            legend: {
                type: 'scroll',
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'vertical',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'left',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'center',
                itemWidth: 18, // 设置图例图形的宽
                itemHeight: 12, // 设置图例图形的高
                textStyle: {
                    // color: 'white', // 图例文字颜色
                    fontSize: 12
                },
                // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                itemGap: 4,
                data: xdata
            },
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },
            series: {
                // 根据名字对应到相应的系列
                name: '总面积',
                label: { //饼图图形上的文本标签
                    normal: {
                        show: true,
                        //position:'inner', //标签的位置
                        textStyle: {
                            fontSize: 10 //文字的字体大小
                        },
                        formatter: '{b}:{d}%'
                    }
                },
                data: newData,
                type: 'pie',
                radius: way,
                center: ['50%', '50%'],
            },
        });

        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart);

        var clickValue;
        chart.asFilter = false;
        chart.off('click');
        // 点击扇区
        chart.on('mousedown', function(params) {
            if (!$(chart._dom).hasClass('echartContent')) {
                return;
            }
            vm.stopPropagation = true;
            clickValue = params;

            if (params.event.event.which == 3) {
                var res;
                if (chart.asFilter) {
                    res = confirm('取消筛选器');
                    if (res) {
                        chart.asFilter = false;
                    }
                } else {
                    res = confirm('用作筛选器');
                    if (res) {
                        chart.asFilter = true;
                    }
                }
            } else {
                if (chart.asFilter) {
                    vm.toast('已将“' + clickValue.name + '”设为筛选器');
                    var index = $(chart._dom).parent().index();
                    var data = vm.totalData[index];
                    if (data) {
                        vm.setGlobalFilterData(data.dimensionSelected[0].FIELDNAME, clickValue.name, {
                            dataBaseSelected: data.dataBaseSelected,
                            tableTypeSelected: data.tableTypeSelected,
                            tableDataSelected: data.tableDataSelected
                        }, index);
                    }
                }
            }
        });
        chart.on('legendselectchanged', function() {
            vm.stopPropagation = true;
        });
        chart.on('legendscroll', function() {
            vm.stopPropagation = true;
        });
    }

    // 4树图(方块图)
    function showTreeMap(xdata, yvalue, chart) {
        var newdata = [];
        for (var i = 0; i < xdata.length; i++) {
            var obj = new Object();
            obj.name = xdata[i];
            obj.value = parseFloat(yvalue[i]);
            newdata.push(obj);
        }

        chart.setOption({
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            // tooltip: {
            //     show: true,
            //     trigger: 'axis',
            //     axisPointer: {
            //         type: 'shadow'
            //     }
            // },
            tooltip: {
                formatter: function(info) {
                    var name = info.name;
                    var value = info.value;
                    return '<div class="tooltip-title">' + name + ':' + value + '</div>';
                }
            },

            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            series: {
                data: newdata,
                type: 'treemap',
                label: { //饼图图形上的文本标签
                    normal: {
                        show: true,
                        //position:'inner', //标签的位置
                        textStyle: {
                            fontSize: 10, //文字的字体大小
                            color: chart._theme.textStyle ? chart._theme.textStyle.color : 'white'
                        },
                        formatter: '{b0}: {c0}'
                    }
                }
            },
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },
        });

        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart);

        var clickValue;
        chart.asFilter = false;
        chart.off('click');
        // 点击
        chart.on('mousedown', function(params) {
            if (!$(chart._dom).hasClass('echartContent')) {
                return;
            }
            vm.stopPropagation = true;
            clickValue = params;

            if (params.event.event.which == 3) {
                var res;
                if (chart.asFilter) {
                    res = confirm('取消筛选器');
                    if (res) {
                        chart.asFilter = false;
                    }
                } else {
                    res = confirm('用作筛选器');
                    if (res) {
                        chart.asFilter = true;
                    }
                }
            } else {
                if (chart.asFilter) {
                    vm.toast('已将“' + clickValue.name + '”设为筛选器');
                    var index = $(chart._dom).parent().index();
                    var data = vm.totalData[index];
                    if (data) {
                        vm.setGlobalFilterData(data.dimensionSelected[0].FIELDNAME, clickValue.name, {
                            dataBaseSelected: data.dataBaseSelected,
                            tableTypeSelected: data.tableTypeSelected,
                            tableDataSelected: data.tableDataSelected
                        }, index);
                    }
                }
            }
            // 虽然报错,但是必不可少
            // chart.click();
        });
        chart.on('legendselectchanged', function() {
            vm.stopPropagation = true;
        });
    }

    // 5折线图(带填充)
    function showAreaLine(xdata, yvalue, chart, showway) {
        var clickValue;
        var newxdata = [];
        var newydata = [];
        if (showway == "1对n") {
            for (var i = 0; i < yvalue.length; i++) {
                var obj = new Object();
                //obj.name = '面积';
                obj.type = 'line';
                obj["areaStyle"] = {
                    normal: {}
                };
                obj.data = yvalue[i];
                newydata.push(obj);
            }
            for (var i = 0; i < xdata[0].length; i++) {
                newxdata.push(xdata[0][i]);
            }
        } else if (showway == "1对1") {
            var obj = new Object();
            obj.type = 'line';
            obj["areaStyle"] = {
                normal: {}
            };
            obj.data = yvalue;
            newydata.push(obj);
            for (var i = 0; i < xdata.length; i++) {
                newxdata.push(xdata[i]);
            }
        } else if (showway == "2对1") {
            for (var i = 0; i < xdata[0].length; i++) {
                if (newxdata.length == 0)
                    newxdata.push(xdata[0][i]);
                if (xdata[0][i] != newxdata[newxdata.length - 1])
                    newxdata.push(xdata[0][i]); //newxdata放横坐标
            }
            var aNewArr = []; //定义一个临时数组
            for (var i = 0; i < xdata[1].length; i++) { //循环遍历当前数组
                if (aNewArr.indexOf(xdata[1][i]) == -1) {
                    aNewArr.push(xdata[1][i]);
                }
            }
            var aNewArr2 = [];
            for (var i = 0; i < aNewArr.length; i++) {
                // var arr = [];
                var arr = new Array(newxdata.length);
                aNewArr2.push(arr);
            }
            // for (var i = 0; i < xdata[1].length; i++) {
            //     for (var j = 0; j < aNewArr.length; j++) {
            //         if (xdata[1][i] == aNewArr[j]) {
            //             aNewArr2[j].push(yvalue[0][i]);
            //         }
            //     }
            // }

            // aNewArr 城镇村属性码
            // newxdata 地类名称
            // 遍历每一条数据(例如:城镇村属性码)
            for (var i = 0; i < xdata[1].length; i++) {
                // 当前已选维度
                // 城镇村属性码
                var m = aNewArr.indexOf(xdata[1][i]);
                // 地类名称
                var n = newxdata.indexOf(xdata[0][i]);
                aNewArr2[m][n] = yvalue[0][i];
            }
            for (var i = 0; i < aNewArr2.length; i++) {
                var obj = new Object();
                obj.name = aNewArr[i];
                obj.type = "line";
                obj["areaStyle"] = {
                    normal: {}
                };
                obj.data = aNewArr2[i];
                newydata.push(obj);
            }
        }

        chart.setOption({ //加载数据图表
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            legend: {
                data: newxdata,
                textStyle: {
                    // color: 'white',
                }
            },
            grid: {
                left: '15px',
                right: '20px',
                bottom: '40px',
                top: '40px',
                containLabel: true
            },
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: newxdata,
                axisLabel: {
                    // formatter:'{value}(平方米)',  //给x轴添加单位
                    textStyle: {
                        // color: 'white',
                        fontSize: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        // color: 'white'
                    }
                },
                splitLine: {
                    lineStyle: {
                        // color: 'rgba(170,170,170,1)'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '单位(公顷)',
                axisLabel: {
                    formatter: '{value}', //给y轴添加单位
                    textStyle: {
                        // color: 'white',
                        fontSize: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        // color: 'white'
                    }
                },
            },
            dataZoom: {
                show: true,
                height: 20,
                bottom: 16,
                start: 0,
                end: 50,
                handlecolor: '#ddd',
                handlestyle: {
                    borderColor: '#cacaca',
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#ddd",
                    shadowcolor: "#ddd",
                },
                // filercolor: (1, 0, 0, 0,[{
                //     offset: 0,
                //     color: '#1eb5e5'
                // }, {
                //     offset: 1,
                //     color: '#5ccbb1'
                // }]),
                // backgroundColor: '#295d8e',
                type: 'slider',
            },
            series: newydata,

            formatter: function(val) {
                clickValue = val[0];
                var html = '';
                val.forEach(function(item, index) {
                    var name = item.name;
                    var color = item.color;
                    var seriesName = item.seriesName;
                    var value = item.value || '';
                    if (index == 0) {
                        html += name;
                    }
                    html += `<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:` + color + `;"></span>` + seriesName + `: ` + value;
                });
                return html;
            }
        });

        // pictureChart.dispatchAction({
        //     type: 'takeGlobalCursor',
        //     key: 'dataZoomSelect',
        //     // 启动或关闭
        //     dataZoomSelectActive: true
        // });

        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart)

        chart.asFilter = false;
        chart.off('click');
        chart.getZr().on('mousedown', function(params) {
            if (!$(chart._dom).hasClass('echartContent')) {
                return;
            }
            console.log(clickValue);
            const pointInPixel = [params.offsetX, params.offsetY];
            if (chart.containPixel('grid', pointInPixel)) {
                var xIndex = chart.convertFromPixel({
                    seriesIndex: 0
                }, [params.offsetX, params.offsetY])[0];
                vm.stopPropagation = true;

                if (params.event.which == 3) {
                    var res;
                    if (chart.asFilter) {
                        res = confirm('取消筛选器');
                        if (res) {
                            chart.asFilter = false;
                        }
                    } else {
                        res = confirm('用作筛选器');
                        if (res) {
                            chart.asFilter = true;
                        }
                    }
                } else {
                    if (chart.asFilter) {
                        vm.toast('已将“' + clickValue.name + '”设为筛选器');
                        var index = $(chart._dom).parent().index();
                        var data = vm.totalData[index];
                        if (data) {
                            vm.setGlobalFilterData(data.dimensionSelected[0].FIELDNAME, clickValue.name, {
                                dataBaseSelected: data.dataBaseSelected,
                                tableTypeSelected: data.tableTypeSelected,
                                tableDataSelected: data.tableDataSelected
                            }, index);
                        }
                    }
                }
            }
        });
    }

    // 6 雷达图
    function showRadar(xdata, yvalue, chart, showway, that) {
        var newData = [];
        var maxValue = 0.0;
        var minValue = 0.0;
        var serisedata = [];
        if (showway == "1对1") {
            for (var i = 0; i < yvalue.length; i++) {
                if (maxValue < parseFloat(yvalue[i]))
                    maxValue = parseFloat(yvalue[i]);
            }
            for (var i = 0; i < yvalue.length; i++) {
                var obj = new Object();
                obj.name = xdata[i];
                obj.max = maxValue;
                if (i == 0) {
                    obj.axisLabel = {
                        show: true
                    };
                }
                // obj.max = yvalue[i] + 10000;
                newData.push(obj);

            }
            var newobj = new Object();
            newobj.value = yvalue;
            newobj.name = "统计";
            serisedata.push(newobj);
        } else if (showway == "1对n") {
            for (var i = 0; i < xdata[0].length; i++) {
                var obj = new Object();
                obj.name = xdata[0][i];
                var c = [];
                for (var j = 0; j < yvalue.length; j++) {
                    c.push(yvalue[j][i]);
                }
                if (maxNumber(c) > maxValue) {
                    maxValue = maxNumber(c);
                }
                // obj.max = maxNumber(c) + 10000;
                // obj.max = maxValue;
                newData.push(obj);
            }

            for (var i = 0; i < yvalue.length; i++) {
                var obj = new Object();
                //obj.name = $("#ul4")[0].children[i].innerText;
                obj.name = that.measureSelected[i].FIELDNAME;
                obj.value = yvalue[i];
                serisedata.push(obj);
            }
        }

        function maxNumber(a) { //a是数组
            var maxValue = 0.0;
            for (var i = 0; i < a.length; i++) {
                if (maxValue < parseFloat(a[i]))
                    maxValue = parseFloat(a[i]);
            }
            return maxValue;
        }

        chart.setOption({
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            tooltip: {
                show: true,
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            radar: {
                name: {
                    textStyle: {
                        // color: '#fff',
                        // backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: newData
            },
            series: [{
                name: '统计',
                type: 'radar',
                data: serisedata
            }],
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },

            // formatter: function (val) {
            // clickValue = val[0];
            // var html = '';
            // val.forEach(function (item, index) {
            //     var name = item.name;
            //     var color = item.color;
            //     var seriesName = item.seriesName;
            //     var value = item.value || '';
            //     if (index == 0) {
            //         html += name;
            //     }
            //     html += `<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:` + color + `;"></span>` + seriesName + `: ` + value;
            // });
            // return html;
            // }
        });

        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart)
    }

    // 8 极坐标图
    function showPolarCoordinates(xdata, yvalue, chart, showway) {
        var clickValue;
        var newxdata = [];
        var newydata = [];
        if (showway == "1对n") {
            for (var i = 0; i < yvalue.length; i++) {
                var obj = new Object();
                //obj.name = '面积';
                obj.type = 'bar';
                obj.coordinateSystem = 'polar';
                obj.data = yvalue[i];
                newydata.push(obj);
            }
            for (var i = 0; i < xdata[0].length; i++) {
                newxdata.push(xdata[0][i]);
            }
        } else if (showway == "1对1") {
            var obj = new Object();
            obj.type = 'bar';
            obj.coordinateSystem = 'polar';
            obj.data = yvalue;

            newydata.push(obj);
            for (var i = 0; i < xdata.length; i++) {
                newxdata.push(xdata[i]);
            }
        } else if (showway == "2对1") {
            for (var i = 0; i < xdata[0].length; i++) {
                if (newxdata.length == 0)
                    newxdata.push(xdata[0][i]);
                if (xdata[0][i] != newxdata[newxdata.length - 1])
                    newxdata.push(xdata[0][i]); //newxdata放横坐标
            }
            var aNewArr = []; //定义一个临时数组
            for (var i = 0; i < xdata[1].length; i++) { //循环遍历当前数组
                if (aNewArr.indexOf(xdata[1][i]) == -1) {
                    aNewArr.push(xdata[1][i]);
                }
            }
            var aNewArr2 = [];
            for (var i = 0; i < aNewArr.length; i++) {
                // var arr = [];
                var arr = new Array(newxdata.length);
                aNewArr2.push(arr);
            }
            // for (var i = 0; i < xdata[1].length; i++) {
            //     for (var j = 0; j < aNewArr.length; j++) {
            //         if (xdata[1][i] == aNewArr[j]) {
            //             aNewArr2[j].push(yvalue[0][i]);
            //         }
            //     }
            // }

            // aNewArr 城镇村属性码
            // newxdata 地类名称
            // 遍历每一条数据(例如:城镇村属性码)
            for (var i = 0; i < xdata[1].length; i++) {
                // 当前已选维度
                // 城镇村属性码
                var m = aNewArr.indexOf(xdata[1][i]);
                // 地类名称
                var n = newxdata.indexOf(xdata[0][i]);
                aNewArr2[m][n] = yvalue[0][i];
            }
            for (var i = 0; i < aNewArr2.length; i++) {
                var obj = new Object();
                obj.name = aNewArr[i];
                obj.type = "bar";
                obj.data = aNewArr2[i];
                obj.coordinateSystem = 'polar';
                newydata.push(obj);
            }
        }
        newxdata = newxdata.map(function(item, index) {
            return {
                value: item,
                textStyle: {
                    // color: '#fff'
                }
            }
        })
        chart.setOption({
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            tooltip: {
                show: true,
                // trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                textStyle: {
                    // color: 'white',
                }
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            angleAxis: {
                type: 'category',
                data: newxdata,
                z: 10,
                nameTextStyle: {
                    // color: '#fff'
                },
                axisLine: {
                    lineStyle: {
                        // color: '#aaa'
                    }
                },
            },
            radiusAxis: {
                axisLine: {
                    lineStyle: {
                        // color: '#aaa'
                    }
                },
                show: true,
            },
            polar: {
                textStyle: {
                    // color: 'white',
                }
            },
            series: newydata,
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },

            legend: {
                show: true,
                data: newxdata
            },

            // formatter: function (val) {
            //     clickValue = val[0];
            //     var html = '';
            //     val.forEach(function (item, index) {
            //         var name = item.name;
            //         var color = item.color;
            //         var seriesName = item.seriesName;
            //         var value = item.value || '';
            //         if (index == 0) {
            //             html += name;
            //         }
            //         html += `<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:` + color + `;"></span>` + seriesName + `: ` + value;
            //     });
            //     return html;
            // }
        });

        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart)
    }

    // 9 漏斗图
    function showFunnel(xdata, yvalue, chart) {
        var newData = [];
        for (var i = 0; i < xdata.length; i++) {
            var obj = new Object();
            obj.name = xdata[i];
            obj.value = yvalue[i];
            newData.push(obj);
        }
        chart.setOption({
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            tooltip: {
                trigger: 'item',
                //formatter: "{a} <br/>{b} : {c}%"
                // formatter: "{a} <br/>{b} : {c}"
                formatter: "{b} : {c}"
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            legend: {
                type: 'scroll',
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                //  orient: 'vertical',
                top: '25px',
                data: xdata,
                textStyle: {
                    // color: 'white'
                },
            },
            calculable: true,
            series: [{
                name: '漏斗图',
                type: 'funnel',
                left: '10%',
                top: 60,
                //x2: 80,
                bottom: 30,
                width: '80%',
                // height: {totalHeight} - y - y2,
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside',
                    // color: 'white'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    // borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: newData
            }],
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },
        });

        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart)

        chart.asFilter = false;
        chart.off('click');
        chart.on('mousedown', function(params) {
            if (!$(chart._dom).hasClass('echartContent')) {
                return;
            }
            const pointInPixel = [params.offsetX, params.offsetY];
            // if (chart.containPixel('grid', pointInPixel)) {
            // var xIndex = chart.convertFromPixel({
            //     seriesIndex: 0
            // }, [params.offsetX, params.offsetY])[0];
            vm.stopPropagation = true;
            if (params.event.which == 3) {
                var res;
                if (chart.asFilter) {
                    res = confirm('取消筛选器');
                    if (res) {
                        chart.asFilter = false;
                    }
                } else {
                    res = confirm('用作筛选器');
                    if (res) {
                        chart.asFilter = true;
                    }
                }
            } else {
                if (chart.asFilter) {
                    vm.toast('已将“' + params.name + '”设为筛选器');
                    var index = $(chart._dom).parent().index();
                    var data = vm.totalData[index];
                    if (data) {
                        vm.setGlobalFilterData(data.dimensionSelected[0].FIELDNAME, params.name, {
                            dataBaseSelected: data.dataBaseSelected,
                            tableTypeSelected: data.tableTypeSelected,
                            tableDataSelected: data.tableDataSelected
                        }, index);
                    }
                }
            }
            // }
        });
        chart.on('legendselectchanged', function() {
            vm.stopPropagation = true;
        });
        chart.on('legendscroll', function() {
            vm.stopPropagation = true;
        });
    }

    // 10 桑基图
    function showSankey(xdata, yvalue, totalData, chart) {
        var dataArr = [];
        var data = [];
        xdata.map(function(item) {
            item.map(function(ite) {
                if (dataArr.indexOf(ite) == -1) {
                    dataArr.push(ite);
                    data.push({
                        name: ite
                    });
                }
            })
        })
        var links = yvalue[0].map(function(item, index) {
            return {
                source: xdata[0][index],
                target: xdata[1][index],
                value: item
            }
        })

        data = data.map(function(item, index) {
            var newIndex;
            if (index == 0) {
                newIndex = 0;
            } else {
                newIndex = index % chart._theme.color.length
            }
            return {
                name: item.name,
                textStyle: {
                    // color: '#fff'
                },
                itemStyle: {
                    color: chart._theme.color[newIndex]
                }
            }
        })
        // console.log(data);
        // console.log(links);

        var option = {
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            tooltip: {
                show: true,
                textStyle: {
                    // color: 'white',
                }
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            series: [{
                type: 'sankey',
                layout: 'none',
                focusNodeAdjacency: 'allEdges',
                data: data,
                links: links,
                label: {
                    textStyle: {
                        color: chart._theme.textStyle ? chart._theme.textStyle.color : 'white'
                        // color: 'source'
                    }
                },
                lineStyle: {
                    // color: 'rgb(150,152,160)',
                    curveness: 0.5,
                    color: 'source',
                    opacity: 0.6
                },
                draggable: false
            }],
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },
        };

        chart.setOption(option);
        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart)

        // chart.asFilter = false;
        // chart.off('click');
        // chart.on('mousedown', function (params) {
        //     const pointInPixel = [params.offsetX, params.offsetY];
        //     // if (chart.containPixel('grid', pointInPixel)) {
        //     // var xIndex = chart.convertFromPixel({
        //     //     seriesIndex: 0
        //     // }, [params.offsetX, params.offsetY])[0];
        //     vm.stopPropagation = true;
        //     if (params.event.which == 3) {
        //         var res;
        //         if (chart.asFilter) {
        //             res = confirm('取消筛选器');
        //             if (res) {
        //                 chart.asFilter = false;
        //             }
        //         } else {
        //             res = confirm('用作筛选器');
        //             if (res) {
        //                 chart.asFilter = true;
        //             }
        //         }
        //     } else {
        //         if (chart.asFilter && params.dataType == 'node') {
        //             vm.toast('已将“' + params.name + '”设为筛选器');
        //             var index = $(chart._dom).parent().index();
        //             var data = vm.totalData[index];
        //             if (data) {
        //                 vm.setGlobalFilterData(data.dimensionSelected[0].FIELDNAME, params.name, {
        //                     dataBaseSelected: data.dataBaseSelected,
        //                     tableTypeSelected: data.tableTypeSelected,
        //                     tableDataSelected: data.tableDataSelected
        //                 }, index);
        //             }
        //         }
        //     }
        //     // }
        // });
    }

    // // 鼠标右键事件
    // $(document).contextmenu(function (e) {
    //     e.preventDefault() // 阻止右键菜单默认行为
    //     console.log('this' + this)
    //     console.log('e' + e)
    //     console.log('e.target' + e.target)
    // })

    // 11 散点图
    function showScatter(xdata, yvalue, chart, way, showway, that) {
        way = 'scatter';
        var clickValue;
        var newxdata = [];
        var newydata = [];
        if (showway == "1对n") {
            for (var i = 0; i < yvalue.length; i++) {
                var obj = new Object();
                // obj.name = vm.measureSelected[i].FIELDNAME;
                obj.name = that.measureSelected[i].FIELDNAME;
                obj.type = '' + way;
                obj.data = yvalue[i];
                newydata.push(obj);
            }
            for (var i = 0; i < xdata[0].length; i++) {
                newxdata.push(xdata[0][i]);
            }
        } else if (showway == "1对1") {
            var obj = new Object();
            obj.name = vm.measureSelected[0].FIELDNAME;
            obj.type = '' + way;
            obj.barWidth = '80%';
            obj.data = yvalue;
            newydata.push(obj);
            for (var i = 0; i < xdata.length; i++) {
                newxdata.push(xdata[i]);
            }
        } else if (showway == "2对1") {
            for (var i = 0; i < xdata[0].length; i++) {
                if (newxdata.length == 0)
                    newxdata.push(xdata[0][i]);
                if (xdata[0][i] != newxdata[newxdata.length - 1])
                    newxdata.push(xdata[0][i]); //newxdata放横坐标
            }
            var aNewArr = []; //定义一个临时数组
            for (var i = 0; i < xdata[1].length; i++) { //循环遍历当前数组
                //判断当前数组下标为i的元素是否已经保存到临时数组
                //如果已保存，则跳过，否则将此元素保存到临时数组中
                if (aNewArr.indexOf(xdata[1][i]) == -1) {
                    aNewArr.push(xdata[1][i]);
                }
            }
            var aNewArr2 = [];
            for (var i = 0; i < aNewArr.length; i++) {
                // var arr = [];
                var arr = new Array(newxdata.length);
                aNewArr2.push(arr);
            }

            // aNewArr 城镇村属性码
            // newxdata 地类名称
            // 遍历每一条数据(例如:城镇村属性码)
            for (var i = 0; i < xdata[1].length; i++) {
                // 当前已选维度
                // 城镇村属性码
                var m = aNewArr.indexOf(xdata[1][i]);
                // 地类名称
                var n = newxdata.indexOf(xdata[0][i]);
                aNewArr2[m][n] = yvalue[0][i];
            }

            for (var i = 0; i < aNewArr2.length; i++) {
                var obj = new Object();
                obj.name = aNewArr[i];
                obj.type = "" + way;
                obj.data = aNewArr2[i];
                newydata.push(obj);
            }
        }
        chart.setOption({ //加载数据图表
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            tooltip: {
                show: true,
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            //legend: {
            //    data: aNewArr,
            //    textStyle: {
            //        color: 'white',
            //    }
            //},
            grid: {
                left: '15px',
                right: '20px',
                bottom: '40px',
                top: '40px',
                containLabel: true
            },
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                data: newxdata,
                axisLabel: {
                    // formatter:'{value}(平方米)',  //给y轴添加单位
                    textStyle: {
                        // color: 'white', // x轴坐标值
                        fontSize: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        // color: 'white' // x轴颜色
                    }
                },
                splitLine: {
                    lineStyle: {
                        // color: 'rgba(170,170,170,1)'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '单位(公顷)',
                axisLabel: {
                    formatter: '{value}', //给y轴添加单位
                    textStyle: {
                        // color: 'white', // y轴坐标值
                        fontSize: 10
                    }
                },
                axisLine: {
                    lineStyle: {
                        // color: 'white' // y轴颜色
                    }
                },
            },
            dataZoom: {
                show: true,
                height: 20,
                bottom: 16,
                start: 0,
                end: 50,
                handlecolor: '#ddd',
                handlestyle: {
                    borderColor: '#cacaca',
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#ddd",
                    shadowcolor: "#ddd",
                },
                // filercolor: (1, 0, 0, 0, [{
                //     offset: 0,
                //     color: '#1eb5e5'
                // }, {
                //     offset: 1,
                //     color: '#5ccbb1'
                // }]),
                // backgroundColor: '#295d8e',
                type: 'slider',
            },
            series: newydata,

            formatter: function(val) {
                clickValue = val[0];
                var html = '';
                val.forEach(function(item, index) {
                    var name = item.name;
                    var color = item.color;
                    var seriesName = item.seriesName;
                    var value = item.value || '';
                    if (index == 0) {
                        html += name;
                    }
                    html += `<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:` + color + `;"></span>` + seriesName + `: ` + value;
                });
                return html;
            }
        });
        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart);

        chart.asFilter = false;
        chart.off('click');
        chart.getZr().on('mousedown', function(params) {
            if (!$(chart._dom).hasClass('echartContent')) {
                return;
            }
            console.log(clickValue);
            const pointInPixel = [params.offsetX, params.offsetY];
            if (chart.containPixel('grid', pointInPixel)) {
                var xIndex = chart.convertFromPixel({
                    seriesIndex: 0
                }, [params.offsetX, params.offsetY])[0];
                vm.stopPropagation = true;

                if (params.event.which == 3) {
                    var res;
                    if (chart.asFilter) {
                        res = confirm('取消筛选器');
                        if (res) {
                            chart.asFilter = false;
                        }
                    } else {
                        res = confirm('用作筛选器');
                        if (res) {
                            chart.asFilter = true;
                        }
                    }
                } else {
                    if (chart.asFilter) {
                        vm.toast('已将“' + clickValue.name + '”设为筛选器');
                        var index = $(chart._dom).parent().index();
                        var data = vm.totalData[index];
                        if (data) {
                            vm.setGlobalFilterData(data.dimensionSelected[0].FIELDNAME, clickValue.name, {
                                dataBaseSelected: data.dataBaseSelected,
                                tableTypeSelected: data.tableTypeSelected,
                                tableDataSelected: data.tableDataSelected
                            }, index);
                        }
                    }
                }
            }
        });
    }

    // 12 弦图
    function showChordal(xdata, yvalue, totalData, chart) {
        var dataArr = [];
        var data = [];
        xdata.map(function(item) {
            item.map(function(ite) {
                if (dataArr.indexOf(ite) == -1) {
                    dataArr.push(ite);
                    data.push({
                        name: ite,
                        value: 0
                    });
                }
            })
        })

        var maxValue = Math.max.apply(null, yvalue[0]);
        var times = Math.floor(maxValue / 50 * 100) / 100;
        var links = yvalue[0].map(function(item, index) {
            data.map(function(item1, index1) {
                if (item1.name == xdata[0][index]) {
                    item1.value += item
                }
                if (item1.name == xdata[1][index]) {
                    item1.value += item
                }
            })
            return {
                source: xdata[0][index],
                target: xdata[1][index],
                value: item,
                lineStyle: {
                    normal: {
                        width: item / times,
                        opacity: 0.5
                    }
                }
            }
        })

        data = data.map(function(item, index) {
            var newIndex;
            if (index == 0) {
                newIndex = 0;
            } else {
                newIndex = index % chart._theme.color.length
            }
            return {
                name: item.name,
                // textStyle: {
                //     // color: '#fff'
                // },
                value: item.value,
                itemStyle: {
                    color: chart._theme.color[newIndex]
                },
                label: {
                    normal: {
                        show: true
                    }
                },
                symbolSize: 0.1,
                // symbolSize: index,
            }
        })
        // console.log(data);
        // console.log(links);

        var option = {
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            // color: globalColor,
            tooltip: {
                show: true,
                textStyle: {
                    // color: 'white',
                }
            },
            // backgroundColor: '#2d3041',
            // backgroundColor: '',
            series: [{
                type: 'graph',
                layout: 'circular',
                circular: {
                    rotateLabel: true
                },
                data: data,
                links: links,
                // roam: false,
                label: {
                    position: 'right',
                    formatter: '{b}',
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                }
            }],
            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                        // backgroundColor: '#2d3041'
                    }
                },
                iconStyle: {
                    normal: {
                        // color: 'white', //设置颜色
                    }
                }
            },
        };

        chart.setOption(option);
        window.addEventListener("resize", function() {
            chart.resize();
        });
        // nowChart.push(chart)

        // chart.asFilter = false;
        // chart.off('click');
        // chart.on('mousedown', function (params) {
        //     const pointInPixel = [params.offsetX, params.offsetY];
        //     // if (chart.containPixel('grid', pointInPixel)) {
        //     // var xIndex = chart.convertFromPixel({
        //     //     seriesIndex: 0
        //     // }, [params.offsetX, params.offsetY])[0];
        //     vm.stopPropagation = true;
        //     if (params.event.which == 3) {
        //         var res;
        //         if (chart.asFilter) {
        //             res = confirm('取消筛选器');
        //             if (res) {
        //                 chart.asFilter = false;
        //             }
        //         } else {
        //             res = confirm('用作筛选器');
        //             if (res) {
        //                 chart.asFilter = true;
        //             }
        //         }
        //     } else {
        //         if (chart.asFilter && params.dataType == 'node') {
        //             vm.toast('已将“' + params.name + '”设为筛选器');
        //             var index = $(chart._dom).parent().index();
        //             var data = vm.totalData[index];
        //             if (data) {
        //                 vm.setGlobalFilterData(data.dimensionSelected[0].FIELDNAME, params.name, {
        //                     dataBaseSelected: data.dataBaseSelected,
        //                     tableTypeSelected: data.tableTypeSelected,
        //                     tableDataSelected: data.tableDataSelected
        //                 }, index);
        //             }
        //         }
        //     }
        //     // }
        // });
    }

    // 13 组合图
    function showUnion(chartData, chart) {
        chartData = {
            "requestData": {
                "dimensionSelected": [{ "COLUMN_NAME": "行政区名称", "FIELDNAME": "行政区名称" }],
                "measureSelected": [
                    { "COLUMN_NAME": "总户数", "FIELDNAME": "总户数" },
                    { "COLUMN_NAME": "常驻男性人口", "FIELDNAME": "常驻男性人口" },
                    { "COLUMN_NAME": "常驻女性人口", "FIELDNAME": "常驻女性人口" },
                    { "COLUMN_NAME": "城市人口", "FIELDNAME": "城市人口" },
                    { "COLUMN_NAME": "乡村人口", "FIELDNAME": "乡村人口" },
                    { "COLUMN_NAME": "常驻人口", "FIELDNAME": "常驻人口" }
                ],
                "dataBaseSelected": "主中心测试库",
                "tableTypeSelected": "0",
                "tableDataSelected": "人口",
                "filterdata": "",
                "aggregate": "sum"
            },
            "responseData": {
                "dimension": [
                    ["五台县", "五寨县", "代县", "保德县", "偏关县", "原平市", "宁武县", "定襄县", "岢岚县", "忻府区", "河曲县", "神池县", "繁峙县", "静乐县"]
                ],
                "measure": [
                    ["139831", "52309", "94212", "65106", "46144", "198019", "68679", "102158", "38276", "232363", "64735", "45819", "116624", "60285"],
                    ["159163", "58430", "114714", "87721", "60048", "260582", "88988", "114324", "45871", "284853", "78253", "57304", "144612", "85989"],
                    ["148027", "52951", "106296", "78154", "55820", "246367", "77095", "111032", "41185", "282219", "71685", "51931", "132444", "75933"],
                    ["126192", "55122", "102699", "74641", "57008", "276726", "85186", "98648", "43961", "370963", "77638", "47286", "129910", "70270"],
                    ["180998", "56259", "118311", "91234", "58860", "230223", "80897", "126708", "43095", "196109", "72300", "61949", "147146", "91652"],
                    ["307190", "111381", "221010", "165875", "115868", "506949", "166083", "225356", "87056", "567072", "149938", "109235", "277056", "161922"]
                ],
                "dimensionName": ["行政区名称"],
                "measureName": ["总户数", "常驻男性人口", "常驻女性人口", "城市人口", "乡村人口", "常驻人口"]
            }
        }

        var typeArr = ['line', 'bar', 'scatter']
        var series = chartData.responseData.measureName.map(function(item, index) {
            var type;
            if (index < typeArr.length) {
                type = typeArr[index]
            } else {
                type = typeArr[index % typeArr.length]
            }
            return {
                name: item,
                type: type,
                data: chartData.responseData.measure[index]
            }
        })
        var option = {
            title: {
                show: true,
                text: chart.title,
                left: 'center'
            },
            tooltip: {
                show: true,
            },
            grid: {
                left: '15px',
                right: '20px',
                bottom: '40px',
                top: '80px',
                containLabel: true
            },
            legend: {
                data: chartData.responseData.measureName,
                top: '30'
            },

            toolbox: {
                show: true,
                right: '20px',
                top: '10px',
                feature: {
                    dataView: {
                        show: false
                    },
                    saveAsImage: {
                        show: true,
                        name: '图',
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2,
                    }
                },
            },
            xAxis: {
                type: 'category',
                data: chartData.responseData.dimension[0]
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: {
                show: true,
                height: 20,
                bottom: 16,
                start: 0,
                end: 50,
                dataBackground: {
                    areaStyle: {
                        color: '#8392A5'
                    },
                    lineStyle: {
                        opacity: 0.8,
                        color: '#8392A5'
                    }
                },
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                },
                type: 'slider',
            },
            series: series
        };

        chart.setOption(option);
        window.addEventListener("resize", function() {
            chart.resize();
        });
    }
});